rotate-icon
v1.0.3
Published
The simple, easy-to-implement animation plugin to rotate icons, images, and elements.
Downloads
194
Maintainers
clarketmReadme
Rotate
The simple, easy-to-implement animation plugin to rotate icons, images, and elements.
Getting Started
Download and Setup
To use this plugin, include the jQuery library and the Rotate.js plugin before the closing <body> tag of your HTML document:
<script src="jquery.js"></script>
<script src="rotate.js"></script>Install with Bower
$ bower install rotate.jsInstall with npm
$ npm install rotate-iconDependencies
Required:
jQuery (1.2.1 or higher)
Usage
JavaScript
To use the export plugin, just call:
$("#my-selector").rotate();You can also specify an angle of rotation (in degrees).
$("#my-selector").rotate(720);Additional properties can be passed in to customize the timing and overall behavior of the animation.
/* Defaults */
$("#my-selector").rotate(360, { // [Number] animation rotation (degrees)
duration: 1000, // [Number] animation duration
easing: 'swing', // [String] easing function
complete: function () { } // [Function] completed callback
});Settings
Below are the plugin defaults.
/* default animation rotation (degrees) */
$.fn.rotate.degrees = 360;
/* default duration, easing, and completed callback */
$.fn.rotate.defaults = {
duration: 1000,
easing: 'swing',
complete: function () {
}
};Browser Support
| | Chrome | Firefox | IE | Opera | Safari | | :---------: | :------: | :------: | :------: | :-----: | :------: | | Android | ✓ | ✓ | ✓ | ✓ | ✓ | | iOS | ✓ | ✓ | ✓ | ✓ | ✓ | | Mac OSX | ✓ | ✓ | ✓ | ✓ | ✓ | | Windows | ✓ | ✓ | ✓ | ✓ | ✓ |
Live Demo
A live, interactive demo can be found here:
www.travismclarke.com
License
Rotate.js is licensed under the terms of the MIT License
Credits
- John Resig - jQuery