jQuery Plugin To Animate Elements On Mouse Move - anm

jQuery Plugin To Animate Elements On Mouse Move - anm
File Size: 7.08 KB
Views Total: 8240
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

anm is a lightweight jQuery plugin to animate a group of elements using JavaScript and CSS3 transforms that react to viewer's cursor. There're 5 different effects you can apply on the html elements: lateral movement, longitudinal movement, rotate, scale and opacity.

How to use it:

1. Include the latest jQuery library and the jQuery anm.js script in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="anm.min.js"></script>

2. Apply mouse-aware animations to your Html elements using data-* attributes like so:

<div class="anm" 
    data-speed-x="16" 
    data-speed-y="-2" 
    data-speed-scale="50" 
    data-speed-rotate="-25"
    data-speed-opacity="50"
>

3. Add the data-anm=".anm" attribute to the body tag so the plugin will automatically initialize on document ready.

<body data-anm=".anm">

4. Methods.

// enable the plugin
anm.on();

// disable the plugin
anm.off();

This awesome jQuery plugin is developed by andrepolischuk. For more Advanced Usages, please check the demo page or visit the official website.