애니메이션 따라해보기 #3
텍스트 애니메이션과 이미지 마스킹 애니메이션을 완성해요.
이번에 연재하는 글들에선 브라우저 서포트(Browser support)에 대한 내용은 자세히 다루지 않습니다.
크롬 브라우저를 기준으로 작성되었으며, IE나 타 브라우저에서 안 보이는 부분들이 생길 수 있습니다.
브라우저 서포트에 문제가 생길 수 있는 부분은 따로 표기해놓겠습니다.
이 글은 CSS에 대해 어느 정도 알고 계신 분들이 보실 거라는 가정하에 작성된 글입니다.
익숙하지 않으신 분들에겐 헷갈리거나 어려운 부분들이 있을 수 있습니다.
애니메이션 따라해보기 #3에서는 애니메이션을 마무리할 예정입니다.
정말 간단한 작업만 남았는데 개인적인 사정으로 글 작성이 많이 늦어졌네요.
애니메이션 따라해보기 #2까지는 가장 밑에 있는 선분들의 애니메이션을 만들었습니다.
그 위에 하나씩 쌓아갈 텐데 이미지부터 위치시키고 애니메이션까지 차근차근 만들어봅시다.
기존에 있던 코드에서 img 태그와 기본적인 포지셔닝에 대한 코드를 추가했어요.
animation-container을 기준으로 정중앙에 위치시키기 위한 코드라고 보시면 됩니다.
이미지 링크는 이곳에서 확인하세요. 던전앤파이터 원화에서 배경만 지우고 크롭한 이미지예요.
똑같이 입력하셨다면 위 이미지처럼 보일 거예요.
html 문서에서 img 태그를 outline-wrapper보다
먼저 입력했기 때문에 아래에 깔려있습니다.
z-index를 사용해서 쌓여있는 순서를 변경해도 좋고,
html 문서에서 입력한 순서를 변경해서 쌓여있는 순서를 변경해도 좋아요.
저는 html 문서에서 직관적으로 보기 위해, css에서 z-index를 추가할게요.
그리고 이미지를 마름모꼴로 마스킹하는 코드도 함께 추가해봅시다.
이미지를 마스킹하는 코드를 작성하는 방법에는 여러 가지 방법이 있는데
clip-path를 사용하는 것이 그나마 직관적으로 짤 수 있어서 택했습니다.
하지만 브라우저 서포트에는 제한이 생기기 때문에 그 점을 유의하셔야 합니다.
그리고 애니메이션에 있어서도 약간 제약이 생깁니다.
마스크의 위치와 이미지의 위치를 따로 설정할 수가 없기 때문에
조금 더 자유롭게 애니메이션을 구현하고 싶다면 다른 방법을 써야 합니다.
clip-path generator로는 이곳을 이용했고, Rhombus를 클릭하여 코드를 복붙 해오시면 됩니다.
이제 clip-path와 translate의 값을 변경하는 애니메이션 코드를 작성해봅시다.
to(진행률 100%)일 땐, 아까 위에서 입력했던 코드를 그대로 가져와서 복사 붙여 넣기 합니다.
from(진행률 0%)일 땐, 이미지가 위에서 아래로 내려와야 하기 때문에 Y축의 값에 -12%를 더하고,
마스킹(clip-path)은 안보이다가 보여야하기때문에 전부 50%의 값을 줍니다.
그래야 정 가운데에 clip-path의 꼭짓점들이 모여서 이미지가 보이지 않기 때문입니다.
animation-fill-mode를 both로 준 이유는
애니메이션이 시작하기 전, from(진행률 0%)에 해당하는 값들이 적용되어 있어야 하고,
애니메이션이 끝난 후, to(진행률 100%)에 해당하는 값들이 유지되어야 하기 때문이에요.
delay, duration은 원본 영상을 보고 비슷한 타이밍을 맞춘 값입니다.
이제 텍스트를 얹어서 마무리 지어봅시다!
html 문서에 위 이미지처럼 코드를 입력해주세요.
subtitle-top과 subtitle-bottom 클래스는 포지션 값을 따로 주기 위해 입력했습니다.
이제 CSS 코드를 볼 건데 길이가 좀 많이 길거예요.
텍스트들의 포지셔닝, 폰트 패밀리, 폰트 크기, 폰트 굵기 등등 스타일에 관련된 코드예요.
텍스트들에 개별적으로 애니메이션을 입력하는 것이 아니기 때문에 크게 신경을 안 써도 됩니다.
이렇게 보인다면 성공입니다 :)
하지만 Baskerville, Futura 폰트가 없어서 다르게 보이는 분들도 계실 거예요.
Mac 환경에선 아마 다들 잘 보일 것이라고 생각합니다.
이제 애니메이션 코드를 추가하면 정말 정말 완성이에요.
text-wrapper 클래스에 애니메이션 코드를 입력하시고, 키프레임 관련된 코드도 똑같이 입력하세요.
from(0%), 64%, 73%, to(100%)라는 지점을 어떤 이유 때문에 설정했는지 설명해드릴게요.
64%는 애니메이션 따라해보기 #1에서 outline-wrapper가 회전을 끝내는 타이밍에 맞추기 위해
설정했습니다. 처음엔 1초에 맞춰서 66%로 했지만 조금 더 빠르게 수정했어요.
73%는 outline-wrapper의 scale이 작아지는 애니메이션 때문에 설정한 지점인데
시간차를 두고 scale이 줄어들어야 하기 때문에 9%(1.35초)의 딜레이를 줬어요.
애니메이션이 이렇게 보이신다면 잘 따라오신 거예요.
작성된 코드와 애니메이션을 보고 싶으신 분은 이곳에서 확인하세요.
벨루가에서는 함께 일하실 분을 모시고 있어요.
같이 광복 이후, 한 세기 넘게 변화가 없던 15조 원에 달하는 주류� 시장을 바꿔나가봐요.
