-
-
Notifications
You must be signed in to change notification settings - Fork 19
Blurred Overlay plugin
R.Brown edited this page Jan 4, 2021
·
2 revisions
- Add blurred background effect to the tour overlay
Please refer to the plugins' installation and configuration Wiki page.
CDN:
<script src="https://cdn.jsdelivr.net/npm/guidechimp/dist/guidechimp.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/guidechimp/dist/guidechimp.min.css">
<script src="https://cdn.jsdelivr.net/npm/guidechimp/dist/plugins/blurredOverlay.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/guidechimp/dist/plugins/blurredOverlay.min.css">
<script>
GuideChimp.extend(guideChimpPluginBlurredOverlay);
</script>
ES6:
import GuideChimp from 'guidechimp';
import blurredOverlay from 'guidechimp/dist/plugins/blurredOverlay';
import 'guidechimp/dist/plugins/blurredOverlay.min.css';
GuideChimp.extend(blurredOverlay);
To change the strength of the blur effect, modify value at filter: blur(...)
Example:
body.gc * {
filter: blur(1.5em);
}
- Blurred Overlay - https://codepen.io/netlicensing/full/pobRyEO