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

Yet another jQuery plugin for the popular parallax scrolling effect where the background content is moved at a different speed than the foreground content while scrolling.

parallax scrolling

Documentation

Welcome

Welcome to the Parallax - ver 1.0.0

Setup

Import style and scripts for web page

    <!-- Style -->     <link rel="stylesheet" href="css/parallax.css" />      <!-- Scripts -->     <script src="js/jquery-3.1.1.min.js"></script>     <script src="js/jquery.parallax.min.js"></script>

Parallax HTML Structure

You can add as many parallax containers as you wish.

    <div class="parallax-container">         <div class="parallax"><img src="images/parallax.jpg"></div>     </div>

Initialization

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

Parallax Customization

The parallax container height is what defines how much of the image can be seen. This is set to 500px by default. You can add your own style to override this.

The image height must be taller than the parallax container height.

    .parallax-container {         height: "your height here";     }

You May Also Like