Small Fast jQuery Parallax Scrolling Plugin - jquery.parallax.js

File Size: 5.4 KB
Views Total: 1796
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Small Fast jQuery Parallax Scrolling Plugin - jquery.parallax.js

Yet another jQuery plugin for the popular parallax scrolling effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.

How to use it:

1. Create and insert your parallax content into a parallax container. You can add as many parallax containers as you wish.

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

...

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

...

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

2. Import the necessary style and scripts into the webpage.

<link rel="stylesheet" href="css/parallax.css">
<script src="//code.jquery.com/jquery-3.2.0.slim.min.js"></script>
<script src="js/jquery.parallax.min.js"></script>

3. Initialization.

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

4. 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. Note that the image height must be taller than the parallax container height.

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

This awesome jQuery plugin is developed by Goldis205. For more Advanced Usages, please check the demo page or visit the official website.