Reputation: 13
I'm trying to replicate this effect http://www.officialwaynerooney.com/social
I've got this so far
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = 100;
if($(window).scrollTop() >= scrollTop){
$('li').animate();
//Animation
}
})
})
But obviously it animates all list items. How is it best to target one list item at a time. I just can't think of what the best way to do it is.
Thanks,
Matt
Upvotes: 0
Views: 2144
Reputation: 3862
For the initial animations:
$('li').each(function(i) {
if($(this).offset().top < $(window).height()){
$(this).delay(i * 50).animate();
}
});
And this for the ones beyond the initial window:
var oldTop = 0;
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop > oldTop ){
$('li:hidden').each(function(i) {
if($(this).offset().top < $(window).height() + scrollTop){
$(this).delay(i * 50).animate();
}
});
oldTop = scrollTop;
}
})
Note: I'm using the :hidden
psuedo-selector assuming the li
's are hidden initially. if they're not, you can have them all have an initial class and check for that, and remove it when animating. Or something, there's lots of ways you can check if it's been animated.
Upvotes: 0
Reputation: 11383
Loop through each li
and apply a separate animation call to each.
$('li').each(function(i) {
$(this).animate();
});
Inside the loop set up your animation based on the properties of $(this)
or i
(index of element in list), e.g. $(this).delay(i * 50).animate(/* other properties */)
.
Upvotes: 1