CSS3 animations - how to make different animations to different elements on scroll

Posted by DeanDeey on Stack Overflow See other posts from Stack Overflow or by DeanDeey
Published on 2013-06-29T19:42:16Z Indexed on 2013/06/29 22:21 UTC
Read the original article Hit count: 282

Filed under:
|
|
|
|

I have a question about the doing CSS3 animations on scroll..

I found a code, that shows the DIV element after the user scrolls down:

    <script type="text/javascript">

            $(document).ready(function() {

        /* Every time the window is scrolled ... */
        $(window).scroll( function(){

            /* Check the location of each desired element */
            $('.hideme').each( function(i){

                var bottom_of_object = $(this).position().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();

                /* If the object is completely visible in the window, fade it it */
                if( bottom_of_window > bottom_of_object ){

                    $(this).animate({'opacity':'1'},500);

                }

            }); 

        });

    });

    </script>   

I'm building a site, which one will have about 5 different boxes, which one will be shown when the user scrolls down to each box. But my question is, how i make the animation inside those boxes.

Foe example: in each box there is title, content and images. How do i make all the elements appear after each other, because with this code all the class elements are shown at once. But i would like that if user scrolls down, first the tittle appears, then the content and at the end the images.

And then when user scrolls to the next box, the same process repeat's itself.

I use some CSS3 delays, but in this case i don't know how long will user take to scroll down.

thanks!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css