This time I will share jQuery Plugin and tutorial about Easy Parallax Scroll Plugin With jQuery And CSS3 – UIparalax, hope it will help you in programming stack.
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).
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="js/paralax.js"></script> |
2. Wrap your element to the parallax container like this:
1 |
<div class="paralax-comtainer demo UIparalax"> |
2 |
<div class="paralax__item"> |
3 |
<img src="parallax.jpg" alt=""> |
3. Enable the parallax scrolling effect on the element.
1 |
$('.demo').UIparalax([{ |
4. You’re able to enable the parallax scrolling effect on multiple elements as these.
01 |
<div class="paralax-comtainer demo1 UIparalax"> |
02 |
<div class="paralax__item item1"> |
03 |
<img src="1.jpg" alt=""> |
05 |
<div class="paralax__item item2"> |
06 |
<img src="2.jpg" alt=""> |
08 |
<div class="paralax__item item3"> |
09 |
<img src="3.jpg" alt=""> |
1 |
$('.demo').UIparalax([{ |
5. To disbale/enable the parallax scrolling effect on certain devices:
01 |
$('.demo').UIparalax([{ |
6. Config the scroll position for each elements.
01 |
$('.demo').UIparalax([{ |
This awesome jQuery plugin is developed by wallwhite. For more Advanced Usages, please check the demo page or visit the official website.
