Home > Uncategorized > CloudCarousel: Rotating diagonally

## CloudCarousel: Rotating diagonally

A nice carousel effect with Javascript can be achieved with “Professor cloud’s cloudcarousel” (http://www.professorcloud.com/mainsite/carousel-test.htm), This carousel rotates in an ellipsis horizontally,  by making a small change it is possible to rotate this carousel 45 degrees, so that it rotates diagonally.

First the maths, where I plotted an askew ellipsis with Wolfram | Alpha, as follows:

x= cos(t)cos(1.1)-sin(t)sin(1.1), y=0.5(cos(t)sin(1.1)-sin(t)cos(1.1))

Where 1.1 is the rotation in Radians, and the 0.5 determines how high

and low the carousel should rotate To translate this into code, I edited the first few lines of the controller “class” as follows:

var Controller = function(container, images, options)
{
var items = [];
var funcSin = function(t){ return 2.2*(Math.cos(t)*Math.sin(2) – Math.sin(t)*Math.cos(2)) };
var funcCos = function(t){ return Math.cos(t)*Math.cos(2) – Math.sin(t)*Math.sin(2) };
var ctx=this;

Categories: Uncategorized