keyframes로 -webkit-mask image 애니메이션구현(END)
keyframes로 -webkit-mask image 애니메이션구현(END) — #keyframes #webkitmask 웹사이트 디자인 소개 및 학습목표 MASK이미지 모션을 활용하여 회사 소개 페...
#MASK#Naver Blog
#keyframes #webkitmask
웹사이트 디자인 소개 및 학습목표
MASK이미지 모션을 활용하여 회사 소개 페이지 만들기
mask모션을 활용하여 웹사이트를 제작해봅니다. 본글은 패스트 캠퍼스 "최성일"강사님의 강의를 요약한 내용입니다.
이전글을 차례대로 보고 오셔야 이해가 빠릅니다
사용하는 언어
CSS
- nth-of-type로 각 패널 .mask 속성 넣기
- -webkit-mask 속성 넣기 (복습링크)
- .lower 속성 넣기
JS
- btns클릭시 article class="mask"활성화 하기 (복습링크)
- classList로 .on .mask .lower 추가 삭제하기
CSS
nth-of-type(n)
| article:nth-of-type(1).mask { -webkit-mask: url(../src/mask1.png); -webkit-mask-size: 2300% 100%; -webkit-mask-position: 0% 0%; } article:nth-of-type(2).mask { -webkit-mask: url(../src/mask2png); -webkit-mask-size: 3000% 100%; -webkit-mask-position: 0% 0%; } article:nth-of-type(3).mask { -webkit-mask: url(../src/mask3.png); -webkit-mask-size: 7100% 100%; -webkit-mask-position: 0% 0%; } article:nth-of-type(4).mask { -webkit-mask: url(../src/mask4.png); -webkit-mask-size: 7400% 100%; -webkit-mask-position: 0% 0%; } | article:nth-of-type(n)각 패널에 들어갈 마스크가 다 다르기 때문에 nth-of-type을 이용하여 따로 넣어준다.-webkit-mask1강에서 다룬 마스크 이미지 속성을 모두 넣어준다.(다운로드링크)mask-size와 url경로가 다르니 각자 다르게 설정해줘야 한다.maskarticle.mask로 class="mask"가 될때 해당 영역에 마스크 이미지를 넣어줄 것이다. |
|---|
@keyframes
| *@keyframes mask-play { 0%{ -webkit-mask-position: 0% 0%;} 100%{ -webkit-mask-position: 100% 0%;}**}* | @keyframesmask-position만 조정해주면 된다 0%->100% |
|---|
animation
| article:nth-last-of-type(1).mask { animation: mask-play 1.4s steps(22) forwards; } | aniamtion 추가transition 1.4s , steps(22) forewards;steps는 (이미지수 -1) 이다이미지수는 size에서 확인 가능하다. (=size \*100) |
|---|
.lower
| * &.lower{ z-index:2; **}* | article.lowerlower은 다음패널 클릭시에 현재패널(.on)로 깔아두는 것이다.mask는 위->아래 패널로 이동할때 발생한다.article.on의 z-inde:3; 이다 (참고) |
|---|
JS
제일 상위 패널에 .mask넣기
| btn.addEventListener('click', e=>{ for(i=0 ; i<btns.length; i++){ btns\[i\].classList.remove('on'); if(panels\[i\].classList.contains('on')){ panels\[i\].classList.add('mask'); } }} | 제일 상위 패널에 .mask를 넣자이전글에 작성된 코드를 살짝 수정한다.if문으로 class="on"이 있는 패널에 .mask를 추가하게끔 구현 |
|---|
클릭패널은 아래로
| btn.addEventListener('click', e=>{ panels\[index\].classList.add('lower'); ) | .lower현재패널은 .on으로 최상위 패널클릭패널은 .lower로 그아래 바로 깔아준다.현재->다음(클릭)패널로 이동하면서 mask가 작동한다. |
|---|
\*추가설명: 좌측 메뉴 버튼을 클릭해주면, 클릭된 패널이 아래로 깔린다(.lower). 현재패널은 mask이미지가 추가되어 마스크 모션이 동작하는 것을 볼 수있다.
setTimeout class제거
| btn.addEventListener('click', e=>{ setTimeout(()=>{ for(i=0 ; i<panels.length;i++){ if(panels\[i\].classList.contains('on')){ panels\[i\].classList.remove('on'); panels\[i\].classList.remove('mask'); } } panels\[index\].classList.remove('lower'); panels\[index\].classList.add('on'); },1400) ) | setTimeoutmask transtion을 1.4s로 했기때문에 1.4s뒤 클래스를 제거한다.on클래스상위 on클래스 속성을 .on제거 .mask제거.lower제거 .on추가클릭해준 패널의 .lower을 제거한다. 클릭 패널에 .on을 추가해 상위로 올린다. |
|---|
클릭시 기존 article에는 .mask추가 클릭한 article에는 .lower이 추가된 후 사라지는 것을 볼 수 있다.
복습
짚어갈 포인트
- classList
- mask작동이해
- nth-of-type
이미 예전에 다뤘던 내용이 많아 생략한 부분이 많습니다.. MUSIC PLAYER, SVG UI 보고오면 더 이해가 빠를 것입니다.
후기
드디어 mask인터렉션도 완료했다.다음 주제는 설치형 워드프레스로 홈페이지 제작 방법을 알아볼것이다...!