Share
Sign In
애니메이션
블록이 스크롤 위치와 시간에 따라 다양하게 움직이며 내용을 강조하는 효과를 줍니다.
애니메이션 추가
편집 화면 오른쪽에서 애니메이션 메뉴를 클릭합니다.
원하는 블록에 커서를 올리고 애니메이션 추가 를 클릭한 뒤, 원하는 애니메이션을 선택합니다.
애니메이션 적용이 완료된 블록은 이미지와 같이 배경색이 초록빛으로 보입니다. 화면 오른쪽 프리뷰 모드 옵션을 껐다가 키면 뷰 모드로 전환하지 않고도 애니메이션이 적용된 모습을 미리 확인할 수 있습니다.
애니메이션 종류
트리거(애니메이션이 시작되기 위한 행위)에 따라 크게 세 가지로 나뉘며, 트리거마다 각각 다른 애니메이션을 적용할 수 있습니다. 각 이름 아래에 있는 예시를 통해 어떤 효과인지 알아봅니다.
입장(Entrance)
블록이 화면에 표시되자마자 애니메이션이 시작되며, 스크롤 위치와 무관하게 미리 설정한 지속 시간동안만 작동합니다.
슬라이드(Slide)
버튼 설정값: Delay 0.3 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
이미지 설정값: Delay 0.6 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
이미지 설정값: Delay 0.6 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
페이드인(Fade in)
버튼 설정값: Delay 0 | Duration 1 | CubicBezier
이미지 설정값: Delay 0.3 | Duration 1 | CubicBezier
이미지 설정값: Delay 0.3 | Duration 1 | CubicBezier
스케일인(Scale in)
버튼 설정값: Delay 0 | Duration 0.8 | Animation CubicBezier
이미지 설정값: Delay 0 | Duration 0.8 | Animation CubicBezier
이미지 설정값: Delay 0 | Duration 0.8 | Animation CubicBezier
스크롤(Scroll)
스크롤을 내리는 동안 블록이 화면에 보이기 시작할 때부터 보이지 않을 때까지, 애니메이션이 스크롤 위치를 따라 연속적으로 작동합니다.
패럴록스(Parallax)
버튼 설정값: Distance 150 | Direction Left | Overflow Visible
이미지 설정값: Distance 150 | Direction Right | Overflow Visible
이미지 설정값: Distance 150 | Direction Right | Overflow Visible
페이드인(Fade in)
버튼 설정값: 없음
이미지 설정값: 없음
이미지 설정값: 없음
페이드아웃(Fade out)
버튼 설정값: 없음
이미지 설정값: 없음
이미지 설정값: 없음
스케일인(Scale in)
버튼 설정값: Direction Center
이미지 설정값: Direction Bottom
이미지 설정값: Direction Bottom
무한 반복(Infinite)
사이트에 접속하자마자 애니메이션이 시작되며, 스크롤 위치와 무관하게 계속 작동됩니다.
브레스(Breathe)
버튼 설정값: Distance 10 | Duration 2 | Direction Center | Overflow Visible
이미지 설정값: Distance 50 | Duration 4 | Direction Width | Overflow Visible
이미지 설정값: Distance 50 | Duration 4 | Direction Width | Overflow Visible
슬라이드(Slide)
이미지 여러 개가 가로 방향으로 흘러갑니다. 이미지 슬라이더 블록에만 적용할 수 있습니다.
설정값: Speed 2 | Pause on hover On
