Create Custom Rotate Animations with jQuery and CSS3
| File Size: | 4.98 KB |
|---|---|
| Views Total: | 4810 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A super tiny JavaScript library which gives you the ability to apply a custom rotate animation on an Html element using jQuery and CSS3 2D transforms.
How to use it:
1. Add the latest version of jQuery library and the jQuery rotate plugin into your document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="src/jquery.rotate.js"></script>
2. Call the plugin on an Html element where you wish to perform a rotate animation on page load.
$("#rotate").rotate();
3. Customize the rotate animation by passing the options during initialization.
$("#rotate").rotate({
// animation speed
speed: 5000,
// how many degrees you want to rotate
degrees: 360,
});
4. Execute a function once the rotate animation is complete.
$("#rotate").rotate({
// OPTIONS
}, function(){
// DO SOMETHING
});
This awesome jQuery plugin is developed by ibandominguez. For more Advanced Usages, please check the demo page or visit the official website.











