Fork me on GitHub











Download

Current release:

Usage

Markup

Simply create a referrable HTML block element - for instance div#vortex - and fill it with other HTML elements. No special requirements for the Vortex children: any class can be applied to them (in this markup example, square-button ).

<div id="vortex">
	<div class="square-button"></div>
	<div class="square-button"></div>
	<div class="square-button"></div>
	<div class="square-button"></div>
	<div class="square-button"></div>
	<div class="square-button"></div>
</div>

CSS

The minimal CSS configuration is the following:

#vortex {
	width: 300px;
	height: 300px;
	position: relative;
}
width and height are obviously customizable.

When animating, Vortex applies to its children the class vortex-animating , such that you can apply your personal style:

#vortex.vortex-animating > * {
	background-color: red;
}

JavaScript

$(window).load(function() {
	$('#vortex').vortex(options);
});
where options is a JavaScript object.

Example:

$(window).load(function() {
	$('#vortex').vortex({
		initialPosition: 270,
		speed: 150
	});
});

Options

Option Default Description
initialPosition 90 Defines the position of the first element in the Vortex, in degrees. Acceptable values are 0, 90, 180, 270.
speed 50 Defines the rotation speed, in milliseconds. Like in jQuery, the lesser, the faster.
deepFactor 0.5 Defines how deep the Vortex is. A factor of 0, means that the Vortex is flat. A factor of x, means that the most outer element size is its original size increased by x multiplied by its original size.
A Vortex with a deepFactor equal to 0.
clockwise true Defines the rotation sense.
manualAdvance false If false, rotation starts automatically.

Callbacks

Callbacks are set in the options object.

Option Default Description
beforeAnimation null Callback function, executed before the animation starts.
afterAnimation null Callback function, executed after the animation stops.

Methods

.start()

Starts the rotation.

$('#vortex').data('vortex').start();

.stop()

Stops the rotation.

$('#vortex').data('vortex').stop();

.setClockwise(clockwise)

Sets the rotation sense. If already rotating, it applies immediately.

$('#vortex').data('vortex').setClockwise(true);

.setSpeed(speed)

Sets the rotation speed, in milliseconds. Like in jQuery, the lesser, the faster.

$('#vortex').data('vortex').setSpeed(50);

.step(steps)

Rotate the Vortex by steps elements.

$('#vortex').data('vortex').step(3);

.reset()

Rotate the Vortex until the initial positions has been reached.

$('#vortex').data('vortex').reset();

FAQ

Does Vortex support multiple instances?

Yes, it does.

Does Vortex support animation easing?

Not yet.

May I put any kind of HTML element into Vortex?

Yes, any kind of element, even inputs.

May the elements be of any size?

Yes, of any size.