Scroll Hero

A jQuery plugin to save your header!

How To Use:

1. Include jQuery and a link to the plugin at the bottom of your HTML document, before the last <body> tag.

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

2. Copy the following code and paste it below your jQuery link. Alternatively, paste it into your .js file and add the link on your html.

				        
<script>
	$(function() {
		$('.top').scrollHero({

		});
	});
</script>
						
					

3. The default state is to blur on scroll. If you want it to darken or turn to grayscale, do the following:

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