jQuery Plugin To Create Tilt / Parallax Effects For Images - Parallax

jquery.parallax.js is a jQuery plugin which uses CSS3 transforms to create an interactive tilt / parallax effect for images. Inspired from codrops' Image Tilt Effect.

Basic usage:

1. Add jQuery library and the jQuery.parallax.js script into your web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.parallax.js"></script>

2. Wrap your image into a container.

<div class="container">
  <img src="demo.jpg" alt="">
</div>

3. Call the plugin on the container to enable the image tilt effect on mouse move.

$('.container').parallax({
  // OPTIONS HERE
});

4. Options is an object with the following optional properties:

$('.container').parallax({

// Selector for the image, is searched within the containers.
// It will only pick the first element that matches the selector.
imageSelector: 'img',

// Number of shadow clones of the image. 
// Higher numbers will affect performance.
shadowCount: 4,

// Apply 'overflow: hidden' to the image container so the shadows don't overflow.
clipShadows: true,

// Hide the image clones when the cursor leaves the container.
hideOnMouseLeave: true,

// Hide the original image after creating the clones.
hideOriginalImage: false,

// Degree of rotation of the image. 
// Positive values push down on the corner of the image closer to the mouse pointer, 
// while negative values lift the closest corner up.
maxRotationDegree: 10,

// Amount of horizontal and vertical movement as the mouse hovers over the image. 
// Positive values pull the image toward the mouse.
translateMultiplier: -10,

// Ratio by which the image will be scaled.
imageScale: 1.1,

// Value of the 'transform: perspective()' CSS property. 
// Lower values increase the effect. 
perspective: 500,

// Value of the z-index CSS property to apply to the first clone of the image.
// Successive clones will receive z-index values incresed by 1.
baseZetaIndex: 20,

// Translate the origin of the effect towards the mouse pointer.
transformOrigin: false,

});

Change log:

2015-06-09

• Fixes for multi-container applications and empty argument error

---

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