Smooth Background Parallax Scrolling Effect with jQuery and CSS3
File Size: | 6.36 KB |
---|---|
Views Total: | 32655 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Parascroll is a lightweight and fast jQuery plugin to create salient, eye-catching, smooth parallax scrolling effects on your background images. Based on jQuery and CSS translate3d
& position: relative
.
Basic Usage:
1. Create a container with parallax content as follows
<div class="parascroll"> <div class="scrollable"></div> <div class="paraContent"> Your content goes here </div> </div>
2. Add a background image to the container in your CSS.
.scrollable { background: url(demo.jpg) no-repeat 50% 50%; }
3. Load jQuery library and jQuery Parascroll plugin at the bottom of your web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.parascroll.js"></script>
4. The required CSS/CSS3 styles.
.parascroll { position: relative; transform: translate3d(0px, 0px, 0px); } .paraContent { position: relative }
5. Call the plugin on the container you just created to active the parallax scrolling effect.
$('.parascroll').parascroll();
This awesome jQuery plugin is developed by jsguy. For more Advanced Usages, please check the demo page or visit the official website.