Cross-platform Parallax Scrolling Plugin For jQuery - Parallax.js

File Size: 630 KB
Views Total: 1342
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cross-platform Parallax Scrolling Plugin For jQuery - Parallax.js

A lightweight, easy-to-use jQuery parallax plugin which applies a performant, smooth, cross-platform parallax scrolling effect to your webpage using requestAnimationFrame API. With the help of the 'Responsive' mode. you can customize the parallax scrolling behavior on different screen sizes.

How to use it:

1. Include the latest version of jQuery library and the plugin's CSS & JavaScript files on the webpage.

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

2. Add your own parallax image & html content to the parallax container as these:

<figure class="parallax" id="parallax-1">
  <img src="parallax-img.jpg" class="parallax__img">
  <figcaption class="parallax__figcaption">Caption for figure</figcaption>
</figure>

<div class="parallax" id="parallax-2">
  <img src="parallax-img.jpg" class="parallax__img">
  <p class="parallax__figcaption">Caption for figure</p>
</div>

...

3. Initialize the plugin to activate the parallax scrolling effect.

$('#parallax-container').parallax();

4. Set the maximum top and bottom offset for the parallax.

$('#parallax-container').parallax({
  parallaxEmphasis: 50 // percentage value
});

5. If you'd like to invert the parallax direction.

$('#parallax-container').parallax({
  reverseParallax: true
});

6. Config the parallax scrolling behavior on different devices.

$('#parallax-container').parallax({
  responsive: [
    {
      breakpoint: 0,
      parallaxEmphasis: 30
    },
    {
      breakpoint: 768,
      parallaxEmphasis: 40,
      reverseParallax: true
    },
    {
      breakpoint: 992,
      parallaxEmphasis: 60
    }
  ]
});

Change log:

2017-05-29

  • v0.2.0

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