jQuery Plugin To Animate Elements On Mouse Move - anm
| File Size: | 7.08 KB |
|---|---|
| Views Total: | 9855 |
| 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.
