디자인팁

[Java Script] 스크롤 효과 1

페이지 정보

작성자 BSAA 작성일16-06-17 16:56 조회1,044회 댓글0건

본문

블로그형 홈페이지 디자인으로 작업을 했습니다.

스크롤 내려갈때마다 다음 컨텐츠가 보여지는 효과 입니다.

 

샘플사이트 보기


index.html 파일

 

9번째 라인 <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 필수로 불러와야하는 옵션입니다.

10번째 라인 <script src="js/jquery.easing.1.3.js"></script> 이것은 애니메이션 효과를 주는 소스 스크롤 내릴때 애니메이션 효과를 넣어줄때 있어야하는 소스

 

11~44번째 라인

 

<script type="text/javascript">

 

$(document).ready(function(e) {

    

$(".chpter").hide();

$(".chpter").eq(0).show(); // chpter 첫번째 컨텐츠만 보이게 설정

$(window).bind("scroll", contents_scroll); // 윈도우 창 전체에 이벤트를 걸어준다

});

 

function contents_scroll(){

 

blog_top_s=$(window).scrollTop(); // 스크롤이 내려갈시에 주는 변수

 

if(blog_top_s>=800){ // 윈도우 문서가 스크롤 포지션이 800px 내려갔을시

$(".chpter").eq(1).fadeIn();

}

 

if(blog_top_s>=2100){

$(".chpter").eq(2).fadeIn();

}

 

if(blog_top_s>=3200){

$(".chpter").eq(3).fadeIn();

}

 

if(blog_top_s>=4100){

$(".chpter").eq(4).fadeIn();

}

 

}

 

</script> 

 

 

html 소스는 index.html​ 파일에 저장이 되있습니다.

 

 

 

 

파일 다운로드

댓글목록

등록된 댓글이 없습니다.