Configurable CSS Rotate Animation Plugin - jQuery rotator

File Size: 5.13 KB
Views Total: 1096
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Configurable CSS Rotate Animation Plugin - jQuery rotator

Just another jQuery plugin which applies a fully configurable rotate animation to any DOM elements using CSS3 transforms.

Basic usage:

1. Add the latest version of jQuery library (slim build) and the jQuery rotator plugin's script to the html page.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.rotator.min.js"></script>

2. The JavaScript to make your element rotate with default settings.

$('.el').rotator();

3. Rotate the element with custom settings.

$('.el').rotator({

  // Initial degree
  degree: 1,

  // degree changes on each rotate
  incrementor: 1,

  // animation speed
  speed: 5000,

  // true = anti-clockwise
  reverse: false
  
});

4. Apply a random rotate animation to the element.

$('.el').rotator({

  random: true
  
});

5. Sometimes you might need to reset the rotate animation:

$('.el').rotator('reset');

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