JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    A tiny 60+fps parallax tilt hover effect for jQuery.
    Filed under 

    • 🔾58%Overall
    • 2,653
    • 8.9 days
    • 🕩257
    • 👥4

    Build Status

    Tilt.js

    A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

    Weights just ⚖1.71kb Gzipped Tilt.js demo gif

    Take a look at the landing page for demos.

    Usage

    <!DOCTYPE html>
    <body>
        <div data-tilt></div> <!-- Tilt element -->
        <script src="jquery.js" ></script> <!-- Load jQuery first -->
        <script src="tilt.js"></script> <!-- Load Tilt.js library -->
    </body>
    

    Options

    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.
    

    Events

    const tilt = $('.js-tilt').tilt();
    tilt.on('change', callback);  // parameters: event, transforms
    tilt.on('tilt.mouseLeave', callback); // parameters: event
    tilt.on('tilt.mouseEnter', callback); // parameters: event
    

    Methods

    const tilt = $('.js-tilt').tilt();
    
    // Destroy instance
    tilt.tilt.destroy.call(tilt);
    
    // Get values of instance
    tilt.tilt.getValues.call(tilt); // returns [{},{},etc..]
    
    // Reset instance
    tilt.tilt.reset.call(tilt);
    

    Install

    • yarn: yarn add tilt.js
    • npm: npm install --save tilt.js

    CDN

    Alternatives

    Show All