Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    blur-overlaypublic

    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.

    install

    npm i blur-overlay

    Downloadslast 7 days

    1

    version

    1.0.3

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar