Interactive Parallax Effect For Background Layers - TurboParallax.js

Yet another jQuery plugin lets you apply an interactive parallax effect to multiple background layers that react to mouse movement. Based on CSS 3D transforms and configurable via HTML data attribute.

How to use it:

1. Add background images to the parallax layers and config the parallax effect for each layer using the data-turbo-parallax attribute as follows:

<div style="position: absolute; background-image: url('bg1.jpg');"
     data-turbo-parallax="{'zoom': 1.25, 'depth': 9}"
>
</div>
<div style="position: absolute; background-image: url('bg2.jpg');"
     data-turbo-parallax="{'zoom': 1.25, 'depth': 5}"
>
</div>
<div style="position: absolute; background-image: url('bg3.jpg');"
     data-turbo-parallax="{'zoom': 2, 'depth': 3}"
>
</div>
<div style="position: absolute; background-image: url('bg4.jpg');"
     data-turbo-parallax="{'zoom': 3, 'depth': 2}"
>
</div>
...

2. Load the latest version of jQuery library and the jQuery TurboParallax.js script in the html page.

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

3. Initialize the plugin to activate the parallax effect on the background layers.

let parallax = new TurboParallax();

---

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