Display an overlay on a webpage that blurs the content behind it
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist add zIndex and noFilter params, improve test coverage Aug 5, 2016
img fix scroll offset issue with masks Aug 2, 2016
spec
src add zIndex and noFilter params, improve test coverage Aug 5, 2016
.babelrc
.editorconfig first pass at a working overlay Jul 17, 2016
.eslintrc.js
.gitignore prepping for publishing Aug 3, 2016
.nvmrc
LICENSE
README.md update docs with better Edge/IE example Aug 5, 2016
bower.json updating docs, fixing circle build for bower Aug 3, 2016
circle.yml updating docs, fixing circle build for bower Aug 3, 2016
index.html updating docs with browser compatibility info Sep 11, 2016
karma.conf.js add zIndex and noFilter params, improve test coverage Aug 5, 2016
package.json updating docs with browser compatibility info Sep 11, 2016

README.md

blur-overlay npm version Bower version

Example of the blur overlay

jQuery plugin for creating blurry overlays. Can customize the content, blur amount, and transition types.

Requires jQuery (>=2.2.4) and jQuery UI (>=1.12.0).

Check out the demo!

Installation

You can install blur-overlay from a package manager:

  • npm: npm install --save blur-overlay
  • bower: bower install --save blur-overlay

Or you can grab the latest .js file:

Usage

$(document).on('ready', function () {

  // Browsers that don't (fully) support filters
  var browserIsEdge = /Edge\/\d+/.test(navigator.userAgent);
  var browserIsIE = /Trident\/\d+/.test(navigator.userAgent);
  var opacity = (browserIsEdge || browserIsIE) ? '0.75' : '0.5';

  // Grab the element you want to "wrap" with blur
  var $target = $('#something');

  // Grab the content you want to display in the overlay
  var $overlay = $('#overlay').detach().show();

  // Initialize the overlay
  $target.blurOverlay({
    // Overlay content
    content: $overlay,
    // Background color of the overlay (use rgba for opacity)
    backgroundColor: 'rgba(255, 255, 255, ' + opacity + ')',
    // Blur amount (default 12px)
    blurAmount: '10px',
    // Duration of CSS transitions
    transitionDuration: '500ms',
    // Type of CSS transitions
    transitionType: 'cubic-bezier(.22, .57, .27, .92)',
    // Elements to "mask" (adds an extra overlay to improve visual contrast)
    masks: [{
      selector: '.mask-me', // Required
      color: 'rgba(255, 255, 255, 0.5)',
      opacity: 1,
      width: '400px',
      height: '300px'
    }],
    // Override the z-index used for the overlay and masks
    zIndex: 3333,
    // Disable the blur filter (for incompatible/buggy browsers or whatever reason)
    noFilter: browserIsEdge || browserIsIE
  });

  // Show the overlay
  $target.blurOverlay('show').then(function () {
    console.log('overlay is showing');
  });

  // Hide the overlay
  $target.blurOverlay('hide').then(function () {
    console.log('overlay is hidden');
  });

  // Update the content of the overlay
  $target.blurOverlay('content', '<p>New Content</p>');

  // Determine if the overlay is showing (true or false)
  console.log('Overlay is showing: ' + $target.blurOverlay('isShowing'));

  // Listen for events on the overlay
  $target.on('blurOverlay.beforeShow', function () {
    console.log('beforeShow event');
  });
  $target.on('blurOverlay.show', function () {
    console.log('show event');
  });
  $target.on('blurOverlay.beforeHide', function () {
    console.log('beforeHide event');
  });
  $target.on('blurOverlay.hide', function () {
    console.log('hide event');
  });

  // Destroy the plugin instance and clean up the DOM
  $target.blurOverlay('destroy');

});

Developing

First and foremost, fork/clone the repo and run:

cd blur-overlay
# Use the recommended node version (6.x)
nvm use
# Install dependencies
npm install

If you don't have nvm, get it here: https://github.com/creationix/nvm

npm scripts

Use the npm scripts defined in package.json to perform common build tasks:

Command Description
npm start Run lint, tests, and build upon changes to src/ and spec/
npm test Run unit tests using Karma and PhantomJS (single-run only)
npm run test:serve Start the Karma server (can debug at http://localhost:9876)
npm run lint Lint src/ and spec/ with ESLint (with --fix flag)
npm run build Transpile src/ using Babel and minify using UglifyJS2, sending output to dist/
npm run demo Launch the demo page (index.html)

Make sure to run npm run build in between code changes to keep the demo page up-to-date!

License

MIT. See LICENSE.