Any Content Parallax Scroll Effect In jQuery - parallaxContent

parallaxContent is a jQuery plugin which applies a smooth parallax scrolling effect on any elements as you scroll down or scroll up the page. Smooth animations based on GSAP's TweenLite.js library.

Dependencies:

• jQuery
• TweenLite.js
• CSSPlugin.js

How to use it:

1. Install the parallaxContent.

# NPM
$ npm install parallax_content --save

2. Include the complied JavaScript files on the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/CSSPlugin.min.js"></script>
<script src="build/app.js"></script>

3. Initialize the plugin on the parallax content and done.

<h3 class="parallax-move">
  Parallax Header
</h3>

$(document).ready(function () {

  $('.parallax-move').parallaxContent();

});

4. Config the parallax scrolling effect in the data-parallax-content attribute:

<h3 class="parallax-move" data-parallax-content='{"shift": 40, "duration": 3}'>
  Parallax Header
</h3>

5. Or in the JavaScript.

$(document).ready(function () {

  $('.parallax-move').parallaxContent({
    "shift": 10, 
    "duration": 1.5,
    "gyroSensitivity": 30
  });

});

Changelog:

2018-07-24

• Added gyro sensitivity option

---

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