애니메이션
블록이 스크롤 위치와 시간에 따라 다양하게 움직이며 내용을 강조하는 효과를 줍니다.
애니메이션 추가
편집 화면에서 애니메이션을 적용할 블록의 핸들(⋮⋮) > 애니메이션 을 클릭합니다. 애니메이션 창 오른쪽 위 + 를 클릭해 입장, 호버, 누르기, 반복, 스크롤 중 원하는 방식을 선택합니다.
원하는 효과를 선택한 후 설정값을 조정합니다.
다른 종류의 애니메이션을 중복 적용하려면 애니메이션 창 오른쪽 위 + 를 다시 클릭합니다.
같은 애니메이션을 여러 블록에 한 번에 적용하고 싶다면, 스타일 복사 기능을 활용해 보세요.
스타일 복사: Cmd(Ctrl) + Option(Alt) + C
스타일 붙여넣기: Cmd(Ctrl) + Option(Alt) + V
애니메이션 종류
트리거(애니메이션이 시작되기 위한 행위)에 따라 크게 다섯 가지로 나뉩니다.
입장
블록이 화면에 표시되자마자 애니메이션이 시작되며, 스크롤 위치와 무관하게 미리 설정한 지속 시간동안만 작동합니다.
Slide
Fade in
Scale in
Rotate
Wave (텍스트 전용)
애니메이션 효과로 텍스트를 강조해보세요.
Type in (텍스트 전용)
애니메이션 효과로 텍스트를 강조해보세요.
Blur in (텍스트 전용)
애니메이션 효과로 텍스트를 강조해보세요.
Scramble (텍스트 전용)
애니메이션 효과로 텍스트를 강조해보세요.
Split text (텍스트 전용)
애니메이션 효과로 텍스트를 강조해보세요.
Stagger (배경 블록 및 섹션 전용)
호버
마우스 커서를 블록 위에 올려두는 동안 애니메이션이 작동하며, 커서가 벗어나면 원래 상태로 돌아갑니다.
Scale
Change color
마우스 커서를 이 박스 위에 올려보세요.
Text reveal
마우스 커서를 이 텍스트 위에 올려보세요.
Text curtain
마우스 커서를 이 텍스트 위에 올려보세요.
누르기
블록을 클릭(터치)할 때 애니메이션이 작동하며, 커서(손)를 떼면 원래 상태로 돌아갑니다.
Scale
이 회색 박스를 꾹 눌러보세요.
Change color
이 회색 박스를 꾹 눌러보세요.
Text reveal
이 텍스트를 꾹 눌러보세요.
Text curtain
이 텍스트를 꾹 눌러보세요.
반복
사이트에 접속하자마자 애니메이션이 시작되며, 스크롤 위치와 무관하게 계속 작동됩니다.
Breathe
Rotate
Heartbeat
Slide (이미지 슬라이더 전용)
스크롤
스크롤을 내리는 동안 블록이 화면에 보이기 시작할 때부터 보이지 않을 때까지, 애니메이션이 스크롤 위치를 따라 연속적으로 작동합니다.
Fade in
Fade out
Parallax
Scale in
Rotate