Grow your CSS skills. Land your dream job.

Animated Background Q.

  • # February 17, 2010 at 6:14 pm

    Oloha. I’m sure this is pretty simple, but I’m learning.
    Could somebody link me to a tutorial that would show me how to very simply animate a header across the screen? Preferably one that I could z-index onto the bottom layer. Admittedly, I don’t know much about JQuery, and I’m trying to avoid using flash.

    You all are fantastic.

    # February 20, 2010 at 3:44 am

    ok im not sure if i get what you want
    if there is an example it would be great
    but here is a few things you need to know
    there is no support for z-index transformation in the jquery
    so if you have to make this effect you will do something near to this

    Code:
    $(‘#black’).animate({

    height: “0px”,

    }, 300,function(){
    $(‘#usersblock’).css(‘z-index’,’5′);
    $(‘#black’).css(‘z-index’,’1′);
    });

    in this case i change the z-index in the callback function after it’s complete the animation

    but even though there is the fade animate that you can use it , it make the opacity value gos from 100 to 0 or whatever you want in time

    Code:
    $(‘#userblock’).fadeOut(‘slow’);

    or

    Code:
    $(‘#userblock’).fadeTo(‘slow’, 0);

    and about the animate tutorials i found this very helpful
    i hope you do
    and if there is any questions
    please let me know !!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".