Question

Please see this image:

I need something like this which will show quote’s gradually go on top of each other. I don’t want to use flash and I want to make it as easy as possible for the client to update. Has anyone got any suggestions?

Answer 1

I would suggest using jquery animate, http://api.jquery.com/animate/ or just fadein, http://api.jquery.com/fadeIn/

Rotate the quotes as you want them, place them on top of eachother using z-index (dont forget to add either position: relative or position: absolute), and hide them.

Css3 rotate example:

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

If you need to make it work for browsers that doesnt support css3, you could just rotate transparent .png:s in PS for example.

Regarding fading in the quotes one by one I would do something like this:

$(".quotecontainer img").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});