node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

blur-overlay

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 () {
 
  // Because Edge + CSS filters cause position bugs 
  var browserIsEdge = /Edge\/\d+/.test(navigator.userAgent);
 
  // 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, .25)',
    // 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
  });
 
  // 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.