효과

정적인 요소에 역동적인 움직임을 만들고자 할 때 사용합니다.

[ 트리거 ]

어떤 액션(동작)을 일어나게 하는 이벤트(사건)를 트리거라고 하며 슬러그에서 지원하는 트리거의 종류는 다음과 같습니다.

• 마우스 클릭/탭

마우스 및 모바일 기기 클릭(탭)시 사용하는 트리거 입니다.

• 마우스 오버

마우스가 요소 위에 놓여져 있을 때 발생합니다. 데스크탑 전용 트리거 입니다.

• 마우스 아웃

마우스가 요소 위에 놓여져 있다가 요소 밖으로 벗어날 때 발생합니다. 데스크탑 전용 트리거 입니다.

• 뷰포트(화면)에서 보여질 때

요소가 뷰포트(화면)에서 보여질 때 발생합니다.

• 뷰포트(화면)에서 사라질 때

요소가 뷰포트(화면)에서 사라질 때 발생합니다.

• 스크롤 되는 동안

스크롤 애니메이션을 실행시키기 위한 트리거입니다.

• 특정 시간 재생시

로티 애니메이션의 특정 재생 시점에 애니메이션을 작동하도록 할 때 사용합니다.

• 페이지 로드시

현재 페이지가 웹 브라우저에 불러

• 스크롤 상단시

스크롤의 위치가 페이지 상단에 도달할 때 발생합니다.

• 스크롤 되었을 때

스크롤의 위치가 상단에서 아래로 이동할 때 발생합니다.

[ 사용자 애니메이션 ]

사용자가 직접 애니메이션 요소를 추가하여 타임라인 기반에 애니메이션을 만들수 있습니다.

• 타임라인

애니메이션은 각 요소별로 시작 시간과 종료시간을 가지고 있으며 시간상으로 순차적으로 작동합니다.

• 그룹 애니메이션

애니메이션 시작 시간을 동일하게 적용하고자 할때 그룹으로 묶을수 있습니다.

[ 스크롤 애니메이션 ]

스크롤 위치에 따라 애니메이션 재생을 제어할 수 있습니다.

• 스크롤 영역 설정

요소가 뷰포트(화면영역)에서 어느 위치일때 스크롤 애니메이션을 작동시킬지에 대한 시작과 끝의 영역을 설정합니다.

[ 로티 싱크 애니메이션 ]

로티 애니메이션의 특정 시간에 애니메이션이 작동하도록 할 수 있습니다.