----- FADE -----
fade
<div class="motion m-fade"></div>
----- FADE ver2 (move) -----
fade Down
<div class="motion m-down"></div>
fade Up
<div class="motion m-up"></div>
fade Right
<div class="motion m-right"></div>
fade Left
<div class="motion m-left"></div>
fade Down Right
<div class="motion m-down-right"></div>
fade Down Left
<div class="motion m-down-left"></div>
fade Up Right
<div class="motion m-up-right"></div>
fade Up Left
<div class="motion m-up-left"></div>
----- FADE ver3 (move + bounce) -----
fade Down
<div class="motion m-up-b"></div>
fade Up
<div class="motion m-down-b"></div>
fade Right
<div class="motion m-right-b"></div>
fade Left
<div class="motion m-left-b"></div>
fade Down Right
<div class="motion m-down-right-b"></div>
fade Down Left
<div class="motion m-down-left-b"></div>
fade Up Right
<div class="motion m-up-right-b"></div>
fade Up Left
<div class="motion m-up-left-b"></div>
----- Roll -----
Roll Left
<div class="motion m-roll-lft"></div>
Roll Right
<div class="motion m-roll-rgt"></div>
Roll Up
<div class="motion m-roll-up"></div>
Roll Down
<div class="motion m-roll-down"></div>
----- Zoom -----
Zoom In
<div class="motion m-zoom-in"></div>
Zoom Out
<div class="motion m-zoom-out"></div>
----- Flip -----
Flip Left
<div class="motion m-flip-left"></div>
Flip Right
<div class="motion m-flip-right"></div>
Flip up
<div class="motion m-flip-up"></div>
Flip down
<div class="motion m-flip-down"></div>
----- Grouping -----
<div class="motion-wrap">
</div>
<div class="m-in
m-down"></div>
<div class="m-in
m-down"></div>
<div class="m-in
m-up"></div>
<div class="m-in
m-up"></div>
<div class="m-in
m-up"></div>
한번에 순차적으로 활성화 시키고자하는 태그들의 부모객체에 'motion-wrap' 클래스를 입력하고
활성화되는 자식 객체에는 'm-in' 클래스를 기본 속성으로 사용하며 원하는 해당 애니메이션의 속성값을 추가합니다.
스크롤시 부모태그인 'motion-wrap'이 노출되면 그 안의 'm-in' 클래스를 가진 객체가 0.2초 간격으로 차례로 활성화됩니다.
상단으로 스크롤을 올리면서 객체가 다시 사라질때도 마찬가지로 차례대로 비활성화되니 참고 바랍니다.
'm-in' 클래스 객체들은 서로 형제관계일때 정상적으로 작동합니다.
How to use
-
-
animation_v-.css / animation_v-.js 파일을 반드시 호출해줍니다.
-
-
애니메이션 효과를 원하는 객체에 클래스를 추가하여 사용합니다. (aos 작업 방식과 유사)
-
-
'motion' 클래스를 기본 설정값으로 사용하며 원하는 해당 애니메이션의 속성값을 추가합니다.
ex) <div class="motion m-flip-down"></div>
Caution
-
-
페이지 퍼블리싱 작업시 애니메이션 기능에 사용된 클래스명을 다른 용도로 중복 사용하지 않도록 주의합니다.
-
-
위의 스크롤 애니메이션 기능은 CSS 'transform' 속성을 활용하여 구현되었습니다.
따라서 애니메이션을 적용한 객체에 transform 속성이 이중으로 부여되면 오류가 발생하니 transform이 적용된 객체에는 애니메이션 사용이 불가합니다.
-
-
우측에서 나타나는 애니메이션의 경우에는 브라우저 창을 벗어난 크기만큼 가로 스크롤이 발생할 수 있습니다.
해당 부모객체에 overflow : hidden;을 적용해주면 해결됩니다.
