Simple Cross-platform Parallax Scroll Plugin - parallax.js

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.

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.

  • Publication date: 18.03.2019
  • Source