Narcissistic Project Managers

    hover-dir

    1.0.1 • Public • Published

    DirectionAwareHoverEffect

    Direction-aware hover effect using CSS3 transforms and dependency-free JavaScript. The idea is to slide in an overlay from the direction we are moving with the mouse.

    article on Codrops

    demo

    How to use

    document.addEventListener('DOMContentLoaded', function() {
        var elements = document.querySelectorAll('.selector');
        
        hoverDir(elements);
        
        // or with custom options
        hoverDir(elements, {
            speed: 500,
            hoverElem: '.custom-class'
        });
     
    });

    Default options

    defaults: {
        speed: 300, // time in ms
        easing: 'ease',
        hoverElem: 'div'
    }

    Todo

    • Write tests
    • Add methods
    • Write proper documentation

    Licensed under the MIT License

    Install

    npm i hover-dir

    DownloadsWeekly Downloads

    19

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    150 kB

    Total Files

    25

    Last publish

    Collaborators

    • rytu