webkit mask 이미지를 활용한 역동적인 인터렉션 구현하기
webkit mask 이미지를 활용한 역동적인 인터렉션 구현하기 — #webkit #maskimage **글읽기 전에 잠깐!** **정보처리기사 필기 준비중이라면?** >> 정보처리기사 ...
#webkit #maskimage
**\\글읽기 전에 잠깐!\*\***
**\*\***정보처리기사 필기** 준비중이라면?\*\***
디자인 소개 및 학습목표
디자인소개
MASK이미지를 활용하여 역동적인 인터렉션을 구현한다
학습목표
- webkit을 간략하게 이해한다.
- css webkit속성을 익힌다.
- css mask 애니메이션을 익힌다.
webkit이란?
애플에서 개발하고 있는 웹 컨텐츠 엔진, 웹 렌더링 엔진이다. 거창한 설명보단 그냥 간단하게 기억할 것만 기억하자.
웹킷은 구글의 크롬, 마이크로소프트 엣지, 네이버 웨일 브라우저에서 사용가능한 엔진이다. css가 호환된다라는 느낌으로 받아들이고 넘어가겠다.
MASK이미지 살펴보기
일렬로 수많은 이미지가 나열되어 있는 시퀀스 이미지이다. 투명색으로 갈수록 아래있는 이미지가 보인다.
**\*원리**
html에서 두개의 패널이 겹쳐있을 때, 위 패널에 mask를 작동시키면 아래 패널로 넘어가면서 mask가 작동한다.
실무로 공부하자!
간단한 예제를 만들어 보면 훨씬 이해하기 쉬울 것이다. 천천히 따라해보자.
HTML
두개의 패널을 겹치도록 배치할 것이다. section>article.upper + article.lower
| <section> <article class="lower">LOWER</article> <article class="upper">UPPER </article> </section> | lower / upper 배치 .upper을 아래에 코드해야 위로 배치가 된다. |
|---|
CSS
기본적인틀
| section{ width: 100%; height: 100vh; article{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0px; bottom: 0px; font: 45px/1 "arial" ; color: #fff; &.upper{ background: lightcoral; } &.lower{ background: lightgreen; }} | article 자식 요소를 정가운데 배치css에서 자식요소를 정가운데 배치하는 방법은 여러가지가 있는데 그 중 가장 빠른 방법은 display:flex;인것 같다.disply:flex;를 사용하면 justify-content와 align-items를 사용할 수 있기 떄문에 매우 빠르게 자식요소를 정가운데 배치할 수 있다..upper의 배경은 lightcoral , .lower의 배경은 lightgreen으로 설정한다..upper이 화면위에 나타나면 OK |
|---|
-webkit속성
| &.upper{ background: lightcoral; -webkit-mask: url(../src/mask1.png); -webkit-mask-size: 2300% 100%; -webkit-mask-position: 0% 0%; } | -webkit속성-webkit-mask: url ; // 마스크 이미지를 불러오는 속성이다.-webkit-mask-size: 2300% 100% ; //mask이미지는 총 23개가 존재한다. 한 이미지당 넓이 100% 높이 100%로 감안하면 23\*100%=2300%로 주면된다. 높이는 고정이다.-webkit-mask-position: 0% 0%; //처음 마스크 포지션을 0으로준다 -> 나중에 인터렉션을 활용하여 포지션을 변경할 것 |
|---|
mask 애니메이션
| ***@keyframes* mask-play{ 0%{ -webkit-mask-position: 0% 0% ;} 100% { -webkit-mask-position: 100% 0% ;}} | mask animation@keyframes를 활용하여 애니메이션을 만든다.-webkit-mask-position을 0% -> 100%로 만들어준다. |
|---|
section에 class ="on"붙을 때
css 애니메이션 지정
| section{ &.on{ .upper{ animation: mask-play 1.4s steps(22) forwards; } } } | section태그에 .on이 붙을때 css 애니메이션section에 .on이 붙을 경우 animation이 실행되도록 한다.animation속성 값:mask-play(이름), 1.4s(동작시간), steps(22)(22개이미지를 끊어서 실행), forwards(앞으로 이동) |
|---|
아직 동작을 실행시키지 않았기 때문에 현재화면은 UPPER화면이 나타난다.
JS
클릭이벤트 만들기
| const section = document.querySelector('section');const upper = document.querySelector('.upper');upper.addEventListener('click', e=>{ section.classList.add('on');}) | upper클릭시 section에 class= "on"upper태그 클릭시 section태그에 .on이 붙도록 지정해준다.css section&.on 속성이 작동하면서 마스크가 작동할 것이다. |
|---|
클릭시 마스크 애니메이션이 작동하는 것을 볼 수 있다.
복습
mask이미지는 여러가지가 있다. 각 요소마다 다르게 적용해야 할 부분이 있는데 이것만 기억하면 mask를 잘 다룰수 있을거라 생각한다.
다르게 적용해야할 것
- -webkit-mask-size: 이미지 갯수**\*100 100%**
- animation: mask-play steps(이미지갯수-1)
나머지는 동일하게 적용해주면 된다.
복습할 것
- css -webkit 속성
- animation 설정
MASK 구현시리즈 보러가기
- [html 자동완성으로 video 태그 넣기 \[배경 자동재생/object-fit\]](https://m.blog.naver.com/PostView.naver?blogId=jword_&logNo=222834776677&navType=by)
다른 시리즈 보러가기
SVG UI
[\[UIUX\] css hover을 활용하여 웹에서 SVG 모션처리하는 방법](https://m.blog.naver.com/PostView.naver?blogId=jword_&logNo=222819538127&navType=by)
Music Player
[\[웹디자인공부\] 음악 재생 사이트 디자인 및 코드짜기 (1)](https://m.blog.naver.com/PostView.naver?blogId=jword_&logNo=222784639195&navType=by)
Node js
vue js