Django 포스팅
Doyeon0430 | 2023년 07월 05일
이번시간에는 애니메이션과 자바스크립트를 사용해 글자에 모션 효과를 넣어보겠습니다.
전체적으로 많이 쓰이는 4가지 효과를 가져왔고 반복을 주고자 키프레임을 추가했습니다.
코드는 HTML에 two_text 클래스만 수정하면서 작업했습니다.
그럼 지금부터 텍스트 애니메이션 디자인을 시작하겠습니다.
첫 번째는 타이핑으로 입력되는 애니메이션 효과입니다.
한글자씩 입력되는 타이핑 효과를 재현하고자 before과 @keyframes을 사용했습니다.
또한 자바스크립트를 사용해 3초마다 글자들이 바뀌도록 만들었습니다.
animation에서 3s는 3초이고 steps(5)는 글자의 개수가 5개라서 5단계로 나누어 진행합니다.
calc(100% + 4px)은 글자의 크기와 너비에 따라 조절할 수 있습니다.
두 번째는 스케일이 커지는 애니메이션 효과입니다.
scale을 적용해 글자가 점점 커지고 작아지는 효과를 줬습니다.
동적으로 반복되는 모션으로 텍스트에 생동감을 넣어주며 주목 받을 수 있게 구현시켜줍니다.
세 번째는 페이드가 작동하는 애니메이션 효과입니다.
opacity로 투명도를 조절해 애니메이션 구현을 했습니다.
키프레임을 3개의 구역으로 나누고 opacity에 값을 1과 0으로 반복시킵니다.
그렇게 서서히 나타나거나 사라지는 효과를 줄 수 있습니다.
네 번째는 각도가 움직이는 애니메이션 효과입니다.
글자가 Z축으로 반복해서 움직이도록 키프레임에 rotateZ를 넣어봤습니다.
자연스러운 모션 효과를 주고자 애니메이션에 3초에 시간을 넣고 3도와 -3도를 번갈아가며 움직이도록 설정했습니다.
지금까지 CSS와 JavaScript를 사용해 글자의 역동적인 효과를 넣어봤습니다.
홈페이지를 제작할 때 세밀한 부분까지 적용하면 전체적으로 생동감을 주며 부드러운 이미지를 넣어줄 수 있습니다.
댓글 (0)
간편 댓글 작성
