인터렉티브 웹 구현하기 ease-in-out ::after 글자모션 (5)

인터렉티브 웹 구현하기 ease-in-out ::after 글자모션 (5) — #인터렉티브웹 #글자모션 웹사이트 디자인 소개 및 학습목표 MASK이미지 모션을 활용하여 회사 소개 페...

#MASK#Naver Blog

#인터렉티브웹 #글자모션

웹사이트 디자인 소개 및 학습목표

MASK이미지 모션을 활용하여 회사 소개 페이지 만들기

mask모션을 활용하여 웹사이트를 제작해봅니다. 본글은 패스트 캠퍼스 "최성일"강사님의 강의를 요약한 내용입니다.

이전글을 차례대로 보고 오셔야 이해가 빠릅니다

이번글에 사용할 언어

CSS

CSS

&::after 만들기

h2{ &::after{ content: ' '; display: block; background: #fff; width: 100%; height: 100%; position: absolute; top: 0px; left: -100%; transition: left ease-in-out 1s 0.6s ; } }	after모션 설정left: -100% : 로 보냈다가 article.on 될때 left:100%보낼 것.p1 / .p2 똑같이 만들면 되고, transition-delay값을 변경하여 시간차 모션을 만든다.

&::after 만들기

h2{ &::after{ content: ' '; display: block; background: #fff; width: 100%; height: 100%; position: absolute; top: 0px; left: -100%; transition: left ease-in-out 1s 0.6s ; } }	after모션 설정left: -100% : 로 보냈다가 article.on 될때 left:100%보낼 것.p1 / .p2 똑같이 만들면 되고, transition-delay값을 변경하여 시간차 모션을 만든다.left모션만 ease-in-out //천천히-빠르게-천천히 움직이는 모션

article.on일때 &::after모션

&::after{ content: ''; display: block; background: #fff; width: 100%; height: 100%; position: absolute; top: 0px; left: -100%; transition: left ease-in-out 1s 1.4s ; }	h2display:inine-block: //h2의 전체 넓이는 자식요소의 크기가 결정::after모션을 h2에 달아줄 것이다..innerh1이 inline-block이라도 폰트 속성에 따라 위아래 여백이 남아있는 경우가 있다. 이럴 경우 transform: scaleY(1.3);을 통해 최대한 여백을 채워준다. 특히 아래여백이 많을경우 .p2와의 간격이 넓어진다.

transform-orign: top center;. (우)

그냥 transform을 적용하면 위 공백쪽으로 글자길이가 커지기 때문에, 반드시 transform-origin 속성을 걸어주자.

::before 속성

.slogan{ &::before{ content: ''; display: block; border: 1px solid #fff; position: absolute; width: 600px; height: 600PX top: 0px; right: 0px; //opacity: 0; transition: all 1.5s; } }	::before흰색 네모선을 만들어준다.aricle.on이 붙을경우 돌려줄 것이다. opacity:0; 을 지정후 article.on 일때 나타나도록 한다

article.on 모션 지정

article.on { h2, .p1, .p2{ &::after{ left: 100%; } .inner{ opacity: 1; } } }	article.onh2, .p1, .p2 한번에 모션처리after요소가 좌->우로 이동.inner 글자가 나타나도록 설정

복습

짚어갈 포인트

이미 예전에 다뤘던 내용이 많아 생략한 부분이 많습니다.. MUSIC PLAYER, SVG UI 보고오면 더 이해가 빠를 것입니다.