Create Interactive Parallax Bars With jQuery And GSAP - parallaxColorBars

The parallaxColorBars jQuery plugin lets you create interactive parallax bars on specific elements that move up/down at varying speeds when scrolling the webpage.

How to use it:

1. Load the latest version of jQuery library and GSAP's TweenLite and CSSPlugin in the html document.

<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/2.0.1/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/CSSPlugin.min.js"></script>

2. Add parallax color bars to the webpage and config the parallax scrolling effect by passing the options to the data attributes:

<div class="parallax-color-bar-block">

  <div style="background-image: url('bg.jpg')"></div>

  <ul class="color-bars-list">

      <li class="color-bar"
          data-parallax-color-bar='{"left": 15, "top": 10, "width": 10, "height": 30, "shift": 400, "duration": 4}'>

          <div class="color-bar-background"
               style="background-image: url('bg.jpg')"></div>

      </li>

      <li class="color-bar"
          data-parallax-color-bar='{"left": 30, "top": -20, "width": 20, "height": 50, "shift": 600, "duration": 3}'>

          <div class="color-bar-background"
               style="background-image: url('bg.jpg')"></div>

      </li>

      <li class="color-bar"
          data-parallax-color-bar='{"left": 55, "top": 10, "width": 20, "height": 50, "shift": 300, "duration": 5}'>

          <div class="color-bar-background"
               style="background-image: url('bg.jpg')"></div>

      </li>

      ...

  </ul>

</div>

3. Initialize the plugin. That's it.

$('.parallax-color-bar-block').parallaxColorBars();

4. You can also config the parallax scrolling by pass the options to the parallaxColorBars method.

$('.parallax-color-bar-block').parallaxColorBars({
  duration: 2,
  shift: 100,
  top: 50,
  left: 50,
  width: 10,
  height: 20
});

---

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