Configurable Parallax Effect On Scroll - Parallax.js

This is the minimalist (less than 1kb) jQuery Parallax plugin which helps you implement a scroll-triggered parallax effect on background images with configurable delay, direction and animation speed.

How to use it:

1. Create the HTML for the parallax container.

<section class="parallax-wrapper">
  <figure class="parallax-demo"></figure>
</section>

2. Add an background image to the figure element.

.parallax-demo {
  position: relative;
  background-image: url(https://picsum.photos/1800/1200/?random);
  background-size: cover;
  height: 1203px;
}

3. Note that your parallax container should be have a fixed height.

.parallax-wrapper {
  position: relative;
  height: 400px;
  overflow: hidden;
}

4. Place the jQuery Parallax.js script after the latest jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery.parallax.js"></script>

5. Initialize the plugin to activate the parallax scroll effect on the background image with default settings.

$(function(){

  $(".parallax-demo").parallax();

});

6. Config the scrolling speed in milliseconds.

$(function(){

  $(".parallax-demo").parallax({
    speed: '100'
  });

});

7. Set the scrolling direction.

$(function(){

  $(".parallax-demo").parallax({
    ascending: true, // false = bottom to top
  });

});

8. Set the delay time to trigger the parallax effect on each scroll.

$(function(){

  $(".parallax-demo").parallax({
    delay: '1000'
  });

});

---

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