D3.js 를 사용하여 데이터 시각화하기 #2 Bar Charts
2018-10-30
간단하게 만들어보는 스크롤 위치에 따른 등장 모션 주기
2018-03-28
Explanation
간단하게 만들어보는 스크롤 위치에 따른 등장 모션 주기
|
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html> <html lang="ko"> <head> <title>스크롤에 따른 등장모션 주기</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script> <style> .target-section {height: 800px; background: #f5f5f5; transition: background 0.5s;} .section1.active {background: #64bcaa;} .section2.active {background: #68a0da;} .section3.active {background: #956fea;} .section4.active {background: #da68d9;} .section5.active {background: #f5b539;} </style> </head> <body> <section class="target-section section"></section> <section class="target-section ready section1"></section> <section class="target-section ready section2"></section> <section class="target-section ready section3"></section> <section class="target-section ready section4"></section> <section class="target-section ready section5"></section> <script> jQuery(document).ready(function($) { $window = $(window); // 다음 섹션이 브라우저 하단으로부터 200px 만큼 보여질때 var delayPosition = 200, // 현재 브라우저의 높이값 windowheight; // 브라우저의 크기가 변하면 대상 엘리먼트의 위치값을 다시 할당 $window.on('resize', function() { insertTargetPosition(); }); // 스크롤이 이동할때 $window.on('scroll', function() { // 현재의 위치 = 스크롤이 이동한 값 + 윈도우 높이 - 처음에 선언한 지연 위치값(200); var position = $window.scrollTop() + windowheight - delayPosition; // 아직 활성화되지 않은 타겟 엘리먼트를 순회하여 $('.target-section.ready').each(function() { // 활성화되어 있지 않고 타겟의 위차값이 현재 위치값보다 작으면 if(!$(this).hasClass('active') && $(this).data('offsetTop') < position) { // 활성화 $(this).addClass('active'); // 활성화 된 엘리먼트는 이후 타겟에서 제외 $(this).removeClass('ready'); } }); }); function insertTargetPosition() { windowheight = $window.height(); // 브라우저의 높이값 할당 $('.target-section').each(function() { // 모든 대상 엘리먼트에 $(this).data('offsetTop', ($(this).offset().top)); // 각자의 위치 값을 할당 }); } (function init() { // 최초 진입시 각 섹션의 위치값을 할당 // 컨텐츠 중에 이미지 파일이 있거나 비동기로 가져오는 값이 있다면, 대상 요소들이 모두 불러진 후에 // 각 섹션의 위치값을 다시 할당해 줘어야 합니다. insertTargetPosition(); })(); }); </script> </body> </html> |
