Various guides and experiments

Rotating Divs with jQuery

This is based on something my girlfriend made when I told her to make a design (she always complains about mine). She wanted bubbles and stuff <_<. I said it'd be too hard to make, but intrigued by the idea of divs moving in and out of focus depending on what you choose I decided to take a look at how it could be made. I quickly came to the conclusion that jQuery's animate method is exactly what I needed, and thereafter I spent an hour or two making four simple divs positioned in a circle in 3D space rotate, fade and change size upon the click of a button.

It was quite a long code, since I changed all the properties manually with animate. I decided I should write a plugin that could take a class and animate to it, but after deciding that it wasn’t worth spending that much time I took a look on the net and found a plugin that already did what I wanted. The one I post here is using that animateToClass plugin to make them rotate.

It works by having four classes (conveniently named box1-4) in the stylesheet with the properties like width, height, top, left, opacity, font-size etc. set to make them look like they’re positioned in a circle 3D space. I then use animateToClass to make box1 turn into box2 (with the time set to 1000), box2 turn to box3, and so on until they’ve all changed. After having used animateToClass I also remove and add the appropiate class to the div so I can rotate again.
Example: $(‘.box2’).animateToClass(‘box1’, time).addClass(‘box1’).removeClass(‘box2’);
In the HTML code all I have to do is make four divs with class box1-4 and a button to make them rotate and it’s done.

Here is a link to the page: Rotating divs. Note that it doesn’t work in Internet Explorer.

Posted in Experiments | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *