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.

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();

Use video

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 .image 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.

Enjoy!