Ajax – Rotating Text

I just implemented a new feature on the Property Investment Project website, which shows a box rotating through various text blocks. Just for clarification, this code doesn’t just apply to rotating “text”, you can put images or anything you want in there.

This is just a flat image example:

I used the excellent Jquery Innerfade Plugin to get the smooth transitional affect. The speed of the rotation time can be tweaked, as can the live time for each text block.

Why I like this method

Ok, there are actually TONNES of ways you can rotate block elements- I’ve seen and tested so many different pieces of code. It can actually be done with a few lines of pure Javascript, as opposed to using an entire JQuery extension. However, what I like about the code i’m using is that it works with fluid/elastic websites. For example, if I run this code on a fluid website, the container of the rotating text reduces as I make the browser window smaller, and the rotation doesn’t mess up. Moreover, the text continues to align properly.

For a clearer picture of what I mean, go to Property Investment and make your browser window narrower and you will see that the rotating block remains perfectly fluid while it still rotates. A lot of the examples I tried didn’t seem to be able to handle fluid layouts. The rotating either stopped/acted weird, or it didn’t act fluid.

Download

I’ve quickly put together a working version which you can download here.