Non-Polynomial Mantissa

    attract-hover

    1.0.0 • Public • Published

    Attract Hover

    Creates an 'attract' effect, when the mouse is near an element and within bounds.

    Requirements

    This plugin currently requires jQuery 2.x+, but we'd recommend using jQuery 3.x+.

    Install

    You can install via npm:

    npm install attract-hover

    Or, manually by copying the attractHover.js from /dist/ and placing it inside your project folders.

    Initialise

    To initialise the plugin, use the code below in your JS file.

    $('.js-attract-hover').attractHover();

    Then add the selector to the element you want to have the attract effect to.

    <a href="/" class="js-attract-hover">
       Button
    </a>

    Options

    You can overwrite the plugin options e.g. $('.js-attract-hover').attractHover({ proximity: 10 });. The options for the plugin can be found below:

    Name Type Default Value Description
    proximity integer 30 Defines the area around the element that starts the interaction.
    magnetism 3 Defines how far the element can move based on the mouse position and element size.
    attractClass string attract-hover Class wrapped around your attracted element that gets added dynamically.
    attractEasingClass string attract-hover-easing Class that moves your attracted element that gets added dynamically.
    attractAttractedClass string attract-hover-attracted Class that is added when the element is attracted.

    CSS / Easing

    Although theres no need to add any CSS / easing to your elements as the attract hover adds CSS itself dynamically. We recommend adding some form of transition and easing to make the attract effect seem more elastic.

    This is best added to the .attract-hover-easing in your own CSS (Unless you've changed the attractEasingClass option on the plugin.)

    .attract-hover-easing {
       transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    }
    

    Roadmap

    • Vanilla version
    • More debugging in browsers and devices

    Keywords

    none

    Install

    npm i attract-hover

    DownloadsWeekly Downloads

    333

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    6.94 MB

    Total Files

    7

    Last publish

    Collaborators

    • bymayo