Super Simple jQuery Based Parallax Scrolling Effect
| File Size: | 79.4 KB |
|---|---|
| Views Total: | 5496 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A super simple and lightweight jQuery solution to apply a cross browser parallax scrolling effect on your background images.
How to use it:
1. Include the latest version of jQuery library from a CDN.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Set a background image to your container.
body {
background-image: url();
}
3. Set the background-attachment for body to "fixed" so that we can control it's scroll speed.
$('body').css('background-attachment', 'fixed');
4. Attach a function to watch the window.scroll event, and move the background image slower than the content scroll.
$('body').css('background-attachment', 'fixed');
This awesome jQuery plugin is developed by tcg. For more Advanced Usages, please check the demo page or visit the official website.
