Tilt.js Tiny Parallax tilt effect for jQuery

932 views 1 year ago jQuery

Tilt.js is a tiny requestAnimationFrame lightweight parallax tilt effect for jQuery. This plugin is useful to create beautiful 3d parallax effect on landing pages.

Installation

To use tilt.js plugin, download plugin source code from github Alternatively you can directly use tilt.js CDN.

Include tilt.js before </body> tag.

<body>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
</body>

Add data-tilt attribute to element which you want to create tilt effect. You can also create effect on elements or images.

<div data-tilt></div>

Or initialize tilt effect manually using css selector.

<div class="tilt"></div>
<script type="text/javascript">
    $('.tilt').tilt();
</script>

That's it. Now refresh the page and hover mouse over div element.

Options

To change tilt behaviour, pass options object into tilt() method.

<script type="text/javascript">
    $('.tilt').tilt({
        scale: 1.2,
        glare: true,
        maxGlare: .5
    });
</script>

Below options are available to change tilt behaviour.

maxTilt:        20,
perspective:    1000,   // Transform perspective, the lower the more extreme the tilt gets.
easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
scale:          1,      // 2 = 200%, 1.5 = 150%, etc..
speed:          300,    // Speed of the enter/exit transition.
transition:     true,   // Set a transition on enter/exit.
disableAxis:    null,   // What axis should be disabled. Can be X or Y.
reset:          true,   // If the tilt effect has to be reset on exit.
glare:          false,  // Enables glare effect
maxGlare:       1       // From 0 - 1.

All options are can also passed through data-attributes.

<div data-tilt data-tilt-speed="300" data-tilt-glare="false"></div>

Methods

tilt.js supports below methods to stop, reset tilt effect.

// initialize tilt effect
const tilt = $('.tilt').tilt();

// remove tilt instance
tilt.tilt.destroy.call(tilt);

// get values of tilt instance
tilt.tilt.getValues.call(tilt); // returns [{},{},etc..]

// reset tilt instance
tilt.tilt.reset.call(tilt);

Events

You can also perform task on tilt events. You can use below events to run callback function.

// initialize tilt effect
const tilt = $('.tilt').tilt();

// parameters: event, transforms
tilt.on('change', callback);

// parameters: event
tilt.on('tilt.mouseLeave', callback);

// parameters: event
tilt.on('tilt.mouseEnter', callback);

For example, the second parameter will return mouse position and tilt effect percentages.

const tilt = $('.tilt').tilt();
tilt.on('change', function(e, transforms) {
    console.log(transforms);
});

This will return below output:

{
    "tiltX": "-20.75",
    "tiltY": "17.40",
    "percentageX": 153.75727335611978,
    "percentageY": 137.0046122868856,
    "angle": 129.98117479276118
}

For more details, visit official documentation. I hope you will like this article.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]