Minimalist Parallax Scroll Effect In jQuery - Parallax.js

An extremely simple jQuery plugin to create a high-performance, mobile-compatible parallax scroll effect by alerting the vertical position of your background image on scroll.

How to use it:

1. Add a background image to your parallax container.

<div class="parallax" 
     style="height:500px; background-image: url(bg.jpg)" 
     id="Example">
     Parallax Container
</div>

2. Add the main JavaScript file parallax.jquery.js after you've loaded the latest jQuery library.

<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.jquery.js"></script>

3. Make the background image's position fixed within the parallax container.

.parallax {
  background-size: cover;
  background-attachment: fixed;
  background-position:center center
}

4. Initialize the parallax plugin.

var parallax = new Parallax($('#example'));

5. Activate the parallax effect on scroll.

$(window).scroll(function(){
  parallax.parallax()
})

---

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