[자바스크립트] 스크롤시 요소하나하나 FadeIn 하기

요새 홈페이지들이 애니메이션 효과를 많이 줍니다...

특히 갤러리 게시판등에서 스크롤시 게시물들이 하나씩 보여지는 효과를 많이 쓰는것 같습니다

나도 구연할일이 생겨서 구연을 해보았습니다.

HTML

    

         
갤러리
         
갤러리
         
갤러리
         
갤러리
    

JS

$(function(){
        
        console.log("현재위치 : " + $(window).scrollTop());
	console.log("윈도우높이값 : " + $(window).height() / 2);

        var ele = $("ul.anyBox > li");
        var any = Array();

        // li의 위치값을 확인하여 ani 배열에 넣는다
        ele.each(function(i){
               ani[i] = $(this).offset().top;
        });

	$(window).scroll(function(){
		var pos = $(window).scrollTop() + ($(window).height() / 2);
                console.log("상단위치값 : " + pos);
		ele.each(function(index){
			var anyBox_Bottom_Pos = $(this).offset().top + $(this).outerHeight();  //anyBox 가장하단의 위치값
			ele.each(function(i){
				if (pos > ani[i]){
					$(this).animate({top:"0px",opacity:"1"},500);
				}
			});
		});
	});

});

여기서 조금만 더 응용하면 다양한 애니메이션 효과를 줄수가 있습니다.

혹시 이보다 더 좋은 방법이 있다면 좀 알려주세요 ^^