Easy Parallax Scroll Plugin With jQuery And CSS3 - UIparalax

The UIparalax jQuery plugin utilizes CSS3 3D transforms to create smooth parallax scrolling effects on single or multiple DOM elements.

You can also config the plugin to enable/disable the parallax scrolling effects on certain devices such as desktop, mobile, tablet.

How to use it:

1. Place the jQuery UIparalax plugin's script paralax.js after jQuery library (slim build).

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

2. Wrap your element to the parallax container like this:

<div class="paralax-comtainer demo UIparalax">
  <div class="paralax__item">
    <img src="parallax.jpg" alt="">
  </div>
</div>

3. Enable the parallax scrolling effect on the element.

$('.demo').UIparalax([{
  // options here
}]);

4. You're able to enable the parallax scrolling effect on multiple elements as these.

<div class="paralax-comtainer demo1 UIparalax">
  <div class="paralax__item item1">
    <img src="1.jpg" alt="">
  </div>
  <div class="paralax__item item2">
    <img src="2.jpg" alt="">
  </div>
  <div class="paralax__item item3">
    <img src="3.jpg" alt="">
  </div>
  ...
</div>

$('.demo').UIparalax([{
  // options for element 1
}, {
  // options for element 2
}, {
  // options for element 3
}]);

5. To disbale/enable the parallax scrolling effect on certain devices:

$('.demo').UIparalax([{
  // options for element 1
}, {
  // options for element 2
}, {
  // options for element 3
}], {
  desktop: true,
  smallscreen: true,
  tablet: false,
  phone: false
});

6. Config the scroll position for each elements.

$('.demo').UIparalax([{
  whence: 'top',
  koef: 0.1
}, {
  whence: 'top',
  koef: -0.5
}, {
  whence: 'top',
  koef: 0.2
}], {
  desktop: true,
  smallscreen: true,
  tablet: false,
  phone: false
});

---

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