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:

• jQuery Sticky Menu with Background Parallax & Blur Effects

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">
...
</header>

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

$('.top').scrollHero({
  brightness: true
  // OR
  grayscale: true
});

Change log:

2015-02-28

• 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.