Simple Cross-platform Parallax Scroll Plugin - parallax.js

A simple and small jQuery parallax scroll plugin which makes the background image move slower than the container scroll.

How to use it:

1. Add background images to parallax elements and then wrap them into parallax containers:

<div class="parallax-container" style="height:50vh;">
  <div class="parallax-element" style="background:url('https://source.unsplash.com/1920x1078/?yoga');"></div>
</div>

<div class="parallax-container" style="height:80vh;">
  <div class="parallax-element" style="background:url('https://source.unsplash.com/1920x1078/?girl');"></div>
</div>

<div class="parallax-container" style="height:50vh;">
  <div class="parallax-element" style="background:url('https://source.unsplash.com/1920x1078/?fitness');"></div>
</div>

2. Make the parallax element absolutely positioned realtive to its parent container.

.parallax-container{
  position:relative;
  overflow:hidden;
}

.parallax-element{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background-size:cover !important;
}

3. Add jQuery JavaScript library (slim build) and the Parallax.js script to the page. Done.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="parallax.js"></script>

4. Customize the animation speed of the parallax scroll effect using the data-scrollSpeed.

<div class="parallax-container" style="height:50vh;">
  <div class="parallax-element" style="background:url('https://source.unsplash.com/1920x1078/?yoga');" data-scrollSpeed="0.8"></div>
</div>

---

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