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.