🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Just another jQuery plugin (~1kb) that uses CSS3 transitions to apply a smooth vertical parallax scrolling effect to your background images.

parallax scrolling

Documentation

jQuery SimpleParallax

demo

Usage

Include jQuery and simple.parallax.js scripts in your HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/simple.parallax.js"></script>

Add the JS

$(document).ready(function() {   $('.parallax').sparallax(); });

Add the CSS

.parallax {   background-repeat: no-repeat;   background-position: 50% 0;   -webkit-transition: background-position .2s ease-in;   -moz-transition: background-position .2s ease-in;   -o-transition: background-position .2s ease-in;   transition: background-position .2s ease-in;   -webkit-background-size: cover;   background-size: cover; }

Add class parallax in your HTML

<section class="parallax" data-parallax-speed="10">   <div>Your parallax container...</div> </section>

Copyright and license

It is under the MIT license.

Enjoy 😋


You May Also Like