Create Parallax Scrolling Objects Using jQuery - Parallax.js

File Size: 4.28 KB
Views Total: 1318
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create Parallax Scrolling Objects Using jQuery - Parallax.js

An extremely lightweight jQuery Parallax Scroll plugin that makes any objects move at different speeds relative to other elements when scrolling the webpage.

The plugin uses jQuery to listen for window scroll event and apply a subtle parallax scroll effect to specific elements using CSS3 transforms.

How to use it:

1. To get started, insert the JavaScript file jquery.parallax.js after loading jQuery library.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery.parallax.js"></script>

2. Apply the parallax plugin to the element within the document. That's it.

<div class="circle"></div>
$(function(){
  $('.circle').parallax();
});

3. Adjust the parallax speed. Default: 1.

<div class="circle"></div>
$(function(){
  $('.circle1').parallax({
    intensity: 5
  });
});

$(function(){
  $('.circle2').parallax({
    intensity: .5
  });
});

$(function(){
  $('.circle3').parallax({
    intensity: 3
  });
});

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