Hit enter after type your search item

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:


 

Specify the options in jQuery code

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

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.

This div height required for enabling the sticky sidebar