jQuery Plugin To Blur Html Elements On Scroll - Scroll Hero

File Size: 667 KB
Views Total: 4595
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Blur Html Elements On Scroll - Scroll Hero

A super tiny jQuery plugin that adds a progressive blur effect to given elements while scroll down the webpage, by using CSS blur filter. Currently works with WebKit browsers like Chrome and Opera.

See also:

How to use it:

1. Make sure to load the jQuery Blur plugin after jQuery library but before the </body> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.scrollHero.js"></script>

2. Add your elements into a container with CSS class of 'top'.

<header class="top">

3. Done. The plugin will using jQuery functions to figure out how far down the user has scrolled and to apply a blur effect on your Html elements embedded the 'top' container.

4. If you want it to darken or turn to grayscale, do the following

  brightness: true
  // OR
  grayscale: true

Change log:


  • rename to Scroll Hero
  • added user options.

This awesome jQuery plugin is developed by jnorthlewis. For more Advanced Usages, please check the demo page or visit the official website.