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="js-parent">

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



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:

jQuery parallax tilt

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.