AOS
AOS(Animate On Scroll) 플러그인을 적용하기 위한 메뉴얼을 제공합니다.
AOS(Animate On Scroll) Plug-in
Plugin 다운로드 사이트 바로가기기본안내
- 박스제목이 없을 경우 기사박스에 각 개체에 효과를 적용
- 박스제목이 있을 경우 기사박스 자체에 효과가 적용 (롤링자동박스에 경우 동일하게 적용)
- 효과적용 방법은 관리자모드에서 제어가능
| class | 비고 |
|---|---|
| .aos-row | 강제적으로 기사박스에 효과 주기 |
| .aos-cols | 강제적으로 기사박스에 각 개체에 효과 주기 |
Fade
fade up
<div data-aos="fade-up">
<h4>fade up</h4>
</div>
fade down
<div data-aos="fade-down">
<h4>fade down</h4>
</div>
fade right
<div data-aos="fade-right">
<h4>fade right</h4>
</div>
fade left
<div data-aos="fade-left">
<h4>fade left</h4>
</div>
fade up right
<div data-aos="fade-up-right">
<h4>fade up right</h4>
</div>
fade up left
<div data-aos="fade-up-left">
<h4>fade up left</h4>
</div>
fade down right
<div data-aos="fade-down-right">
<h4>fade down right</h4>
</div>
fade down left
<div data-aos="fade-down-left">
<h4>fade down left</h4>
</div>
Flip
Flip up
<div data-aos="Flip-up">
<h4>Flip up</h4>
</div>
Flip left
<div data-aos="Flip-left">
<h4>Flip left</h4>
</div>
Flip right
<div data-aos="Flip-right">
<h4>Flip right</h4>
</div>
Flip down
<div data-aos="Flip-down">
<h4>Flip down</h4>
</div>
Zoom
Zoom in
<div data-aos="Zoom-in">
<h4>Zoom in</h4>
</div>
Zoom in up
<div data-aos="Zoom-in-up">
<h4>Zoom in up</h4>
</div>
Zoom in left
<div data-aos="Zoom-in-left">
<h4>Zoom in left</h4>
</div>
Zoom in right
<div data-aos="Zoom-in-right">
<h4>Zoom in right</h4>
</div>
Zoom in down
<div data-aos="Zoom-in-down">
<h4>Zoom in down</h4>
</div>
Zoom out
<div data-aos="Zoom-out">
<h4>Zoom out</h4>
</div>
Zoom out up
<div data-aos="Zoom-out-up">
<h4>Zoom out up</h4>
</div>
Zoom out left
<div data-aos="Zoom-out-left">
<h4>Zoom out left</h4>
</div>
Zoom out right
<div data-aos="Zoom-out-right">
<h4>Zoom out right</h4>
</div>
Zoom out down
<div data-aos="Zoom-out-down">
<h4>Zoom out down</h4>
</div>
Duration(Time)
duration 300
<div data-aos="fade-up" data-aos-duration="300">
<h4>duration 300</h4>
</div>
duration 1000
<div data-aos="fade-left" data-aos-duration="1000">
<h4>duration 1000</h4>
</div>
duration 3000
<div data-aos="fade-in" data-aos-duration="3000">
<h4>duration 3000</h4>
</div>