Magnetic Cursor

by. Riou Kevin

This library is a library done to animate webpage with a "Magnet Cursor", when you hover a choosen DOM element, the mouse addons morph around the element

This project is not a release, it's currently in development, please consider it and work with it informed, RIOU Kevin

Download View it on github

First init

The easiest way to init the cursor is a call the init function and give css style of #cursor


magnetCurs.init();
        

So you have to define css style like you can see by clicking the following button


#cursor{
    border-radius: 1000px;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(244, 67, 54, 1);
    margin: -15px;
    transition-duration: 150ms;
    z-index: 10000;
    padding: 0;
    box-sizing: border-box;
}
        
Test Round test

With a little pointer

As you can see here, you can add params to the init function like an option to add a second pointer that follow the mouse


magnetCurs.init({
    pointer:true
});
        

So you have to define css style to the pointer to


#pointer{
    border-radius: 1000px;
    width: 10px;
    height: 10px;
    border: 5px solid rgba(244, 67, 54, 1);
    margin: -5px;
    z-index: 10001;
    padding: 0;
    box-sizing: border-box;
}
        
Test

Spacing is not as you want ?

You can specify spacing in 'px' like under on init


magnetCurs.init({
    spacing:20,
    pointer:true
});
        
Test

And you want an animation on click ? (currently in development)

Yes, you can, just give a new params with click animation duration, you can animate as you want with css keyframes


magnetCurs.init({
    click:3000,
    spacing:20,
    pointer:true
});
        

The keyframe name need to be cursorClick and define like under ;)


@keyframes cursorClick{
    from,to{
        border: 3px solid rgba(244, 67, 54, 1);
        transform: scale(1);
    }
    60%{
        border: 3px solid rgba(244, 67, 54, 0);
        transform: scale(2);
    }
    70%{
        border: 3px solid rgba(244, 67, 54, 0);
        transform: scale(1.4);
    }
}
        
Test Click test, this button does nothing

Shake your mouse when on button

Shockable params take an intensity from 1 to 4


magnetCurs.init({
    click:3000,
    spacing:20,
    pointer:true,
    shockable:2
});
        
Test

More customization

When the mouse magnet on a target it add the class "magnet" on it, you can define any style in css as you want, change color, change borderSize, ... etc


.magnet{
    border: 3px dotted yellow;
    box-shadow: ... ;
}