jQuery Plugin To Blur Html Elements On Scroll - Scroll Hero
File Size: | 667 KB |
---|---|
Views Total: | 4584 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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"> ... </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.