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 </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.