프로젝트/애플 웹사이트 클론 (7) 썸네일형 리스트형 [ 애플 웹사이트 클론 ] 캔버스 드로우 애니메이션 적용하기 2 저번 포스팅에서는 캔버스 내에서 좌우 흰색 영역을 설정하는 것까지 진행했었다. 이제 그 흰색 영역들의 X좌표를 이용하여, 스크롤에 따라 옆으로 이동시켜주기만 하면 된다. 구현순서는 아래와 같다. 캔버스가 시작하는 타이밍의 Y좌표 그 Y좌표부터 시작하여 스크롤섹션이 끝날때까지 애니메이션 설정 간단하다. 그럼 바로 Y좌표 (시작점)을 구해보자. 가장 간단한 방법으로는 getBoundingClientRect()라는 내장메소드를 사용하는 것이다. domRect = element.getBoundingClientRect(); 위의 메소드를 사용하면, 상대적인 뷰포트와 Y,X값 모두 알 수 있다. 하지만, 스크롤을 빠르게 느리게할때마다 다른 값이 출력되 이 방법으로는 딱 떨어지는 정밀한 애니메이션을 구현할 수 없다는.. [ 애플 웹사이트 클론 ] 캔버스 드로우 애니메이션 적용하기 1 이제 다음 구현해야할 애니메이션은 아래와 같다. 캔버스태그에 이미지를 그린 뒤에, 이미지가 스크롤을 내릴수록 점점 차오르는 애니메이션을 구현할 차례다. 점점 차오르는 구간은 이미지의 크기가 변하는 것이 아니라, 양 옆의 흰색 영역을 추가하여 흰색 영역의 X좌표를 조절하여 구현할 것이다. 그러기 위해서는 아래와 같은 순서가 필요하다. 캔버스가 윈도우창 비율에 맞게 항상 꽉 차야한다. 캔버스 양 옆에 흰색 영역을 그려, 스크롤을 내릴때마다 양 옆으로 좌표를 이동시켜준다. 가장 먼저, 캔버스태그를 윈도우창에 꽉 차게 만들어보자. const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / obj.. [ 애플 웹사이트 클론 ] 비디오에 스크롤 애니메이션 적용하기 비디오를 스크롤 애니메이션으로 보여주기 위해서는 세 가지의 방법이 존재한다. 비디오의 길이를 이용해서, 스크롤된 비율에 따라 비디오의 해당 구간을 보여주는 방식 비디오 프레임대로 이미지를 추출해서, 각 구간의 이미지를 보여주는 방식 위와 비슷하게 이미지를 추출해서, 캔버스태그에 각 구간의 이미지를 그려 보여주는 방식 첫 번째의 비디오를 그대로 사용하는 방식은 이미지를 추출해서 사용하는 방식보다 부드럽지 못하고, 파일크기가 조금 더 커지기 때문에 패스했다. 두 번째 방식은 확장성면에서 세 번째 방식보다 떨어진다고 생각했다. 지금은 하나의 이미지만을 화면에 보여주기 때문에, 큰 문제가 없을 것으로 보이나, 훗날 여러 개의 이미지를 겹쳐서 보여줘야하는 경우가 생길때 이미지태그는 여러 개의 이미지태그를 사용해야.. [ 애플 웹사이트 클론 ] 특정 구간에 스크롤 애니메이션 적용하기 스크롤이 될때마다, 현재 보고있는 스크롤섹션을 지정해주었으면 이제 지정된 스크롤섹션마다의 애니메이션을 적용해주어야 한다. 그러기위해서는 다음과 같은 값이 필요하다. 해당 스크롤섹션 내에서 스크롤이 어느 정도 내려갔는 지 애니메이션에 필요한 스타일 시작지점과 끝지점 다음과 같이 변수명을 설정해준 뒤, 시작값, 마지막값, 시작지점과 끝지점을 할당해준다. messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }] 위의 변수명을 통하여 다음과 같이 해석할 수 있다. translateY로 20%에서 0%로 움직이게되고, 해당 스크롤섹션에서 15%에서 시작해 20%에서 끝이난다. calcValues라는 함수를 만들어, 특정 css값을 주는 계산을 실행해준다. funct.. [ 애플 웹사이트 클론 ] 현재 스크롤 섹션에 따른 아이디값 부여 현재 스크롤섹션의 아이디값에 따라 다른 태그들을 보여주기 위해서, 아이디값을 부여해보자. 아래와 같이 CSS가 적용이 되어있다. .sticky-elem { display: none; position: fixed; top: 0; left: 0; width: 100%; } #show-scene-0 #scroll-section-0 .sticky-elem, #show-scene-1 #scroll-section-1 .sticky-elem, #show-scene-2 #scroll-section-2 .sticky-elem, #show-scene-3 #scroll-section-3 .sticky-elem { display: block; } 기존의 sticky-elem이라는 class는 display:none;이기 때문.. [ 애플 웹사이트 클론 ] 현재 스크롤 섹션 지정하기 스크롤 섹션마다의 높이를 세팅했으면, 이제 스크롤을 내릴 때마다 몇 번째 스크롤 섹션에 있는 지 지정을 해주어야한다. 스크롤이 내려갈때마다, 현재 스크롤섹션을 감시하는 함수를 만들어주어야한다. 순서는 다음과 같다. 이벤트리스너 "scroll"이 실행될때마다, 함수가 실행되도록 한다. 그 함수에는 스크롤높이에 따라 현재 섹션을 지정해준다. 가장 먼저, 다음과 같은 변수를 선언해준다. let yOffset = 0; let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤섹션높이들의 합 let currentScene = 0; //현재 활성화된 (눈 앞에 보고있는 씬 = 스크롤섹션) yOffset은 현재까지 스크롤된 높이를 알려주는 변수이다. prevScro.. [ 애플 웹사이트 클론 ] 스크롤 섹션 높이 세팅하기 각 div태그에 스크롤높이값을 일정하게 지정해주어, 스크롤애니메이션을 구현해야한다. 그러기 위해서는 가장 먼저, 스크롤 섹션을 태그에 아이디값으로 지정해주고 창 크기가 변할 때마다, 달라지는 스크롤높이들을 스크롤섹션에 적용해주어야한다. 첫 번째로, 아래와 같이 스크롤섹션이라는 아이디값을 통해 섹션을 나누어 준다. AirMug Pro 온전히 빠져들게 하는 세라믹 주변 맛을 느끼게 해주는 주변 맛 허용 모드 온종일 편안한 맞춤형 손잡이 새롭게 입가를 찾아온 매혹 두 번째로, 다음과 같은 배열로 스크롤섹션들을 관리해주자. 여기서 querySelector를 통해, DOM요소에 접근하여 각 스크롤섹션태그들을 불러왔다. const sceneInfo = [ { //0 type: "sticky", hieghtNum: .. 이전 1 다음
