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;

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: