ArParallax.js
ArParallax.js is a lightweight customizable jQuery plugin which utilizes CSS3 3D transforms to create a smooth parallax effect on your images when scrolling down or up. Demo page
Installation
Download and include arparallax.min.js in your document after including jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/arparallax.min.js"></script>
Useage
HTML
<div class="arparallax">
<div class="imageContainer">
<!-- image or video -->
</div>
</div>
JS
$('.arparallax').arparallax();
Options
| Name | type | default | description |
|---|---|---|---|
speed
|
float
|
0.32
|
The speed at which the parallax effect runs.
0.0 means the image will appear fixed in place, and
1.0 the image will flow at the same speed as the page content. |
imageContainer
|
jQuery Selector
|
.imageContainer
|
The parallax fx will be prepended into this container. |
blur
|
string
|
auto
|
You can provide the blur effect for your image.
Values: auto |
both |
up |
bottom |
none. |
blurMultiplier
|
number
|
1
|
You can specify a multiplier for the blur effect. |
scaleMultiplier
|
number
|
0.05
|
You can specify a multiplier for the scale effect.
0for disable effect. |
depth
|
string
|
direct
|
You can provide the perspective for your image.
Values: direct |
reverse |
none.
|