Search code examples
jqueryjquery-animatequotes

How can I do this? - Animate Quote's - JQuery

Please see this image: Quotes

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?

Solution

  • 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);
});