Minimal Parallax Effect with jQuery and CSS3 Transforms - Parallax Scroll
File Size: | 4.64 KB |
---|---|
Views Total: | 2465 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Parallax Scroll is an extremely lightweight jQuery plugin which allows you to implement a familiar Parallax effect with your background image on vertical page scrolling.
How to use it:
1. Make sure to load the jQuery parallax scroll plugin after you have jQuery library installed.
<script src="jquery.min.js"></script> <script src="parallaxScroll.js"></script>
2. All content that is part of the parallax scroll section should be contained in a single div with an unique id.
<div id="container"> ... </div>
3. An optional div containing contents to be faded out may also be included. It may be inside or outside of the content div, depending on your styling/organizational needs/preferences.
<div id="fade"> <h1>Scroll down to see the magic!</h1> </div>
4. Enable the plugin and override the options to customize the parallax scrolling effect.
new jQPS({ // container id containerId: "demo", // path to your background image backgroundImgUrl: "bg.jpg", // fadeElementId is optional fadeElementId: "fade", // scroll speed, // 1-5 scrollSpeed: 2 });
Change log:
2015-07-11
- Fix Firefox opacity bug
- Fix #fade alignment Safari bug
This awesome jQuery plugin is developed by scottyschup. For more Advanced Usages, please check the demo page or visit the official website.