❤
npm
Sign UpSign In

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

/hover-dir/

    Package Sidebar

    Install

    npm i hover-dir

    Repository

    github.com/ryanturner10/DirectionAwareHoverEffect

    Homepage

    github.com/ryanturner10/DirectionAwareHoverEffect#readme

    Weekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    150 kB

    Total Files

    25

    Last publish

    Collaborators

    • rytu
    Try on RunKit
    Report malware