스크롤보이는객체

- html

- script

$(window).on('load', function(){
							motion();
						});

$(window).scroll(function(){
							motion();
						});

function motion(){
							var winTop = $(window).scrollTop();
							var winH = $(window).height();
							$('.movBox').each(function(index){
								var hei = $('.movBox').eq(index).outerHeight();
								var top = $('.movBox').eq(index).offset().top;

/* 기본
								if(winTop + winH > top){
									if(winTop > top + hei){
										$('.movBox').eq(index).removeClass('move');
									}else{
										$('.movBox').eq(index).addClass('move');
									}
								}else{
									$('.movBox').eq(index).removeClass('move');
								}
								*/

/* 해당 컨텐츠 절반높이 스크롤시 */
								if(winTop + winH > top){
									if(winTop > top + hei){//스크롤 다운시 해당 컨텐츠가 화면에서 사라지면 클래스 제거
										$('.movBox').eq(index).removeClass('move');
									}else{
										if(winTop + winH > top + hei/2){//해당 컨텐츠의 중간에 스크롤이 왔을경우 클래스 추가
											$('.movBox').eq(index).addClass('move');
										}
									}
								}else{//스크롤 업시 해당 컨텐츠가 화면에서 사라지면 클래스 제거
									$('.movBox').eq(index).removeClass('move');
								}
							});
						}

스크롤 보이는객체

예제

- html

- script