Auto-Moving Parallax Elements - jQuery PointParallax

PointParallax is a jQuery plugin for creating parallax scrolling effects that automatically move any element from one point to another while scrolling.

How to use it:

1. Add parallax elements to the web page.

<div class="pointparallax">
  <div class="point__item"></div>
  <div class="point__item"></div>
</div>

2. Place the JavaScript file jquery.pointparallax.js after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery.pointparallax.js"></script>

3. Call the function pointparallax() on the top container and done.

$('.pointparallax').pointparallax();

4. Config the parallax scrolling effect via data attributes as these:

• data-point: The point all the elements should move to
• data-path: The amount of path that must pass the elements to the control point
• data-position: The default position

<div class="pointparallax"
     data-point="center"
     data-path="100">
  <div class="point__item"
       data-position="left"
       data-point="center"
       data-path="200">
  </div>
  <div class="point__item"
       data-position="right"
       data-point="center"
       data-path="300">
  </div>
</div>

5. To make the element fixed on scroll:

<div class="point__item pointparallax-fixed" 
     data-position="center">
</div>

6. You can also ass the options to the pointparallax() function on init.

$('.pointparallax').pointparallax({
  itemsSelector: '.point__item',
  items: {},
  itemIncludeMargin: false,
  position: null,
  autoheight: false,
  autoheightClass: 'pointparallax-autoheight',
  fixedClass: 'pointparallax-fixed',
  point: 'center',
  path: 100,
});

---

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