jQuery Plugin For Simple Background Parallax Effect
File Size: | 787 KB |
---|---|
Views Total: | 1282 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery plugin to create a simple background parallax scrolling effect on a set of Html elements.
How to use it:
1. Include jQuery library and the jQuery simple parallax plugin in the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.simple-parallax.min.js"></script>
2. Wrap your main content into a container.
<div class="wrapper"> ... </div>
3. Create the background parallax elements as follows.
<div class="background_align"> <div class="background"> <div class="px top" data-offset="2"> <img src="images/block_top1.png"> </div> <div class="px mid" data-offset="15"> <img src="images/block_mid1.png"> </div> <div class="px bottom" data-dir="up" data-offset="5"> <img src="images/block_bottom1.png"> </div> </div> </div>
4. The required CSS styles.
.background_align { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: -100; } .background { position: relative; width: 1440px; margin: 0 auto; width: 100%; height: 100%; } .px { position: absolute; width: 100%; } .top { top: -50%; } .mid { top: 0%; } .bottom { top: 50%; }
5. Initialize the plugin by calling:
(function(){ $('.px').parallax({ offset: 10, scrollEl: $('.wrapper') }); })();
This awesome jQuery plugin is developed by alnv. For more Advanced Usages, please check the demo page or visit the official website.