Create Parallax Tilt Effect on Hover by jQuery with a Demo

How to create parallax tilt effect?

The tilt.js plug-in can be used for creating the parallax tilt effect on mouse hover for any element in your web pages.

After Gzipped, the size of the plug-in is only around 1.45Kb. It is the 60+ fps (Fames per seconds) hover effect and quite easy to set up.

Developer’s page Download plug-in Demo

How to set up this plug-in on your website?

You may download and include the JS file (tilt.jquery.js) and include this after the jquery-3.1.1.slim.min.js library as shown in the demo below.

You may also install the package by yarn and npm i.e.:

yarn add tilt.js
npm install –save tilt.js

The markup

The markup requires creating the multi-layer like this:

<div class="c-test js-tilt" data-tilt-maxglare=".4" data-tilt-glare="true">Tilt Demo

</div>

Specify the options in jQuery code

You may specify the number of options in the jQuery code. Following are the available options:

maxTilt: 30,

perspective: 1000, //Lower value means the more tilt

easing: "cubic-bezier(.02,.87,.41,.97)", // As mouse enters and gets out

scale: 1,

speed: 355, // transition speed upon entering and exit

transition: true,

axis: null,

reset: true,

glare: false,

maxGlare: 1 // the value from 0 to 1

A demo of using the plug-in

See the demo online by clicking the link or image below. You can see the complete code that includes CSS, markup, and jQuery code along with dependency files in the <head> and before </body> tags:

See online demo and code

The tilt.js plug-in also supports events and has a few methods. Learn more about this plug-in in the developer page here.

Animations, Parallax