CSS3 animations - how to make different animations to different elements on scroll
- by DeanDeey
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!
