jQuery Plugin For Rotating Elements Elliptically - vortex

vortex is an awesome jQuery plugin that allows you to elliptically rotating elements using CSS3 linear-gradient and javascript.

How to use it:

1. Include jQuery library and jQuery vortex on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.vortex.min.js"></script>

2. The HTML

<div id="vortex">
<div class="square-button">1</div>
<div class="square-button">2</div>
<div class="square-button">3</div>
<div class="square-button">4</div>
<div class="square-button">5</div>
<div class="square-button">6</div>
</div>

3. The CSS

.square-button {
height: 70px;
position: absolute;
width: 70px;
border-radius: 35px;
background: #3f4c6b;
background: -moz-linear-gradient(top, rgba(63,76,107,1) 0, rgba(63,76,107,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(63,76,107,1)), color-stop(100%, rgba(63,76,107,1)));
background: -webkit-linear-gradient(top, rgba(63,76,107,1) 0, rgba(63,76,107,1) 100%);
background: -o-linear-gradient(top, rgba(63,76,107,1) 0, rgba(63,76,107,1) 100%);
background: -ms-linear-gradient(top, rgba(63,76,107,1) 0, rgba(63,76,107,1) 100%);
background: linear-gradient(to bottom, rgba(63,76,107,1) 0, rgba(63,76,107,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f4c6b', endColorstr='#3f4c6b', GradientType=0);
}
.square-button div.number {
font-size: 12px;
font-weight: bold;
color: #fff;
display: block;
margin: auto;
text-align: center;
position: relative;
top: 25px;
}
#vortex {
width: 300px;
height: 300px;
position: relative;
}
.square-button.first {
background: #ffa84c;
background: -moz-linear-gradient(top, #ffa84c 0, #ff7b0d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffa84c), color-stop(100%, #ff7b0d));
background: -webkit-linear-gradient(top, #ffa84c 0, #ff7b0d 100%);
background: -o-linear-gradient(top, #ffa84c 0, #ff7b0d 100%);
background: -ms-linear-gradient(top, #ffa84c 0, #ff7b0d 100%);
background: linear-gradient(to bottom, #ffa84c 0, #ff7b0d 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa84c', endColorstr='#ff7b0d', GradientType=0);
}
#vortex.vortex-animating>* {
background: #88bfe8;
background: -moz-linear-gradient(top, rgba(136,191,232,1) 0, rgba(112,176,224,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(136,191,232,1)), color-stop(100%, rgba(112,176,224,1)));
background: -webkit-linear-gradient(top, rgba(136,191,232,1) 0, rgba(112,176,224,1) 100%);
background: -o-linear-gradient(top, rgba(136,191,232,1) 0, rgba(112,176,224,1) 100%);
background: -ms-linear-gradient(top, rgba(136,191,232,1) 0, rgba(112,176,224,1) 100%);
background: linear-gradient(to bottom, rgba(136,191,232,1) 0, rgba(112,176,224,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#88bfe8', endColorstr='#70b0e0', GradientType=0);
}
#vortex {
width: 300px;
height: 300px;
position: relative;
}

4. Call the plugin with options

<script>
$(window).load(function() {
$('#vortex').vortex({
speed:50, // Rotation speed
clockwise: true, // Rotation sense
manualAdvance: false, // Rotation starts automatically or not.
beforeAnimation: null, // Call back options
afterAnimation: null // Call back options
});
});
</script>

5. You can also create some buttons using vortex methods to control the animation

<button id="vortex-start" type="button" onclick="$('#vortex').data('vortex').start();">Start</button>

<button id="vortex-stop" type="button" onclick="$('#vortex').data('vortex').stop();">Stop</button>

<button id="vortex-clockwise" type="button" onclick="$('#vortex').data('vortex').setClockwise(true);">Clockwise</button>

<button id="vortex-counterclockwise" type="button" onclick="$('#vortex').data('vortex').setClockwise(false);">Counterclockwise</button>

<button id="vortex-step-1" type="button" onclick="$('#vortex').data('vortex').step(1);">1 step</button>

<button id="vortex-step-3" type="button" onclick="$('#vortex').data('vortex').step(3);">3 step</button>

<button id="vortex-reset" type="button" onclick="$('#vortex').data('vortex').reset();">Reset</button>

<button id="vortex-speed-10" type="button" onclick="$('#vortex').data('vortex').setSpeed(10);">Set speed 10</button>

<button id="vortex-speed-50" type="button" onclick="$('#vortex').data('vortex').setSpeed(50);">Set speed 50</button>

---

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