안녕하세요. 제임스 입니다.
앞서 jQuery 를 이용한 스크롤 처리에 관해 포스팅 했었는데요.
이번에는 스크롤에 애니메이션 효과를 추가 해보도록 하겠습니다.
■ jQuery 를 이용한 스크롤 애니메이션 효과주기
위 이미지와 같이 스크롤 시 애니메이션 효과 주는 방법에 대해 알아 보겠습니다.
▶ HTML body 부
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <body style="padding: 20px;"> <p>※ jQuery 를 이용하여 scroll 처리 하기 </p> <div id="scrollTestDiv" style="margin: 20px; height: 200px; width: 300px; overflow: scroll; background-color: orange;" > <br>--- 애국가 가사 START ---<br><br> <br>동해물과 백두산이 마르고 닳도록<br> <br>하느님이 보우하사 우리나라 만세<br> <br>무궁화 삼천리 화려 강산<br> <br>대한사람 대한으로 길이 보전하세<br> <br><br> <br>남산 위에 저 소나무 철갑을 두른듯<br> <br>바람서리 불변함은 우리 기상일세<br> <br>무궁화 삼천리 화려 강산<br> <br>대한사람 대한으로 길이 보전하세<br> <br><br> <br>가을 하늘 공활한데 높고 구름 없이<br> <br>밝은 달은 우리 가슴 일편단심일세<br> <br>무궁화 삼천리 화려 강산<br> <br>대한사람 대한으로 길이 보전하세<br> <br><br> <br>이 기상과 이 마음으로 충성을 다하여<br> <br>괴로우나 즐거우나 나라사랑하세<br> <br>무궁화 삼천리 화려 강산<br> <br>대한사람 대한으로 길이 보전하세<br> <br>--- 애국가 가사 END ---<br><br> </div> <input type="button" onclick="scrollToBottomWithAnimation();" value="최하단으로 애니메이션 스크롤 하기"> <br><br> <input type="button" onclick="scrollToTopWithAnimation();" value="최상단으로 애니메이션 스크롤 하기"> </body> | cs |
height 200px, width 300px 의 div tag 내에 애국가 가사를 입력 했습니다. 당연히 div 범위 내에서 다 표현 할 수 없으므로 스크롤바가 생기게 됩니다.
이제 이 스크롤바을 앞선 포스팅과 같이 스크롤처리를 할 예정이며 이때 스크롤에 애니메이션 효과를 주겠습니다.
▶ javascript 함수
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript"> // 텍스트의 최하단으로 애니메이션 효과를 주어 scroll 하기 function scrollToBottomWithAnimation(){ var div = document.getElementById('scrollTestDiv'); $('#scrollTestDiv').animate({ scrollTop: div.scrollHeight - div.clientHeight }, 500); } // 텍스트의 최상단으로 애니메이션 효과를 주어 scroll 하기 function scrollToTopWithAnimation() { var div = document.getElementById('scrollTestDiv'); $('#scrollTestDiv').animate({ scrollTop: 0 }, 500); } </script> | cs |
animate() 함수를 이용하여 애니메이션 효과를 줄 수 있습니다.
자세한 내용은 아래 링크 참조 하세요.
https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
▼ scrollToBottomWithAnimation() 함수
scrollTestDiv 라는 아이디를 가진 요소(여기서는 div tag)를 animate 시킵니다.
scrollTop 이라는 옵션값을 scrollHeight - clientHeight 값으로 지정 합니다.
clientHeight 는 요소 내부 padding 값을 포함한 height 값입니다.
자세한 내용은 아래 링크 참조하세요.
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
애니메이션 효과를 주는데 delay 시간을 0.5 초로 지정 했습니다.
▼ scrollToTopWithAnimation() 함수
scrollTop 이라는 옵션값을 0 으로 지정 합니다. 0 이 파싱되면 당연히 최상단으로 이동 되겠죠? ^^
▽▽▽ 결과 화면 (테스트 해보세요) ▽▽▽
--- 애국가 가사 START ---
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한사람 대한으로 길이 보전하세
남산 위에 저 소나무 철갑을 두른듯
바람서리 불변함은 우리 기상일세
무궁화 삼천리 화려 강산
대한사람 대한으로 길이 보전하세
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세
무궁화 삼천리 화려 강산
대한사람 대한으로 길이 보전하세
이 기상과 이 마음으로 충성을 다하여
괴로우나 즐거우나 나라사랑하세
무궁화 삼천리 화려 강산
대한사람 대한으로 길이 보전하세
--- 애국가 가사 END ---
▼ 도움이 되셨다면 로그인이 필요 없는 ▼
▼ 하트 클릭 한번 부탁 드립니다 ▼
감사합니다 :D
'jquery' 카테고리의 다른 글
| jQuery 를 이용하여 id, class, name 의 input value 값 가져오기 (1805) | 2021.06.10 |
|---|---|
| jquery 를 이용하여 Scroll 처리 하기 (468) | 2018.07.23 |
| jquery 로 input 값 금액 포맷 표기하기 (490) | 2018.07.17 |
쉬운코딩이최고
Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.