Create Custom Rotate Animations with jQuery and CSS3
File Size: | 4.98 KB |
---|---|
Views Total: | 4794 |
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.