스크롤모션

- html

- script

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

scrlMov();

$(document).on('click', '.navigation .btnNavi', function(){
									var idx = $(this).index();
									var top = $('.motSection').eq(idx).offset().top;
									var spd = '400';// 스크롤 속도

$('.scrlDimmed').remove();
									$('body').append('<div class="scrlDimmed" style="position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;"></div>')

$('html, body').animate({scrollTop:top}, spd, 'linear', function(){
										$('.scrlDimmed').remove();
									});
								});

$('.navigation .btnNavi.on').trigger('click');// 화면 로드시 해당 컨텐츠로 이동
							});

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

$(window).resize(function(){
								motHei();
							});

/* 컨텐츠 영역 화면높이과 같게 설정 */
							function motHei(){
								$('.motWrap').each(function(){
									var winH = $(window).height();
									$(this).find('.motSection').css({'min-height':winH});
								});
							}

/* 스크롤시 이벤트 발생 */
							function scrlMov(){
								var winTop = $(window).scrollTop();
								var winH = $(window).height();
								$('.motSection').each(function(index){
									var hei = $('.motSection').eq(index).outerHeight();
									var top = $('.motSection').eq(index).offset().top;

if(winTop + winH > top){
										if(winTop > top + hei){//스크롤 다운시 해당 컨텐츠가 화면에서 사라지면 클래스 제거
											$('.motSection').eq(index).removeClass('on');
										}else{
											if(winTop + winH > top + 100){//해당 컨텐츠의 100px을 스크롤이 지났을 경우 클래스 추가
												$('.motSection').eq(index).addClass('on');

//네비게이션 버튼
												if(winTop >= top - hei/2){
													$('.navigation .btnNavi').removeClass('on').eq(index).addClass('on');
												}
											}
										}
									}else{//스크롤 업시 해당 컨텐츠가 화면에서 사라지면 클래스 제거
										$('.motSection').eq(index).removeClass('on');
									}

//마지막 컨텐츠
									if(winTop == $(document).height() - winH){
										$('.navigation .btnNavi').removeClass('on');
										$('.navigation .btnNavi:last-child').addClass('on');
									}
								});
							}

스크롤 모션

예제

- html

- script