쉽고 간편한 스크롤 애니메이션 라이브러리
css
<link href="https://cdn.jsdelivr.net/gh/es-sa/SA/dist/sa.css" rel="stylesheet">javascript
<script src="https://cdn.jsdelivr.net/gh/es-sa/SA@master/dist/sa.js"></script> @threshold?: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1
window.addEventListener('DOMContentLoaded', () => {
sa.init(threshold);
});| property | property-value |
|---|---|
| animation-name | ${dataset.sa} |
| animation-duration | 1000ms |
| animation-delay | 0ms |
| animation-direction | normal |
| animation-iteration-count | 1 |
| animation-play-state | running |
| animation-timing-function | ease |
| animation-fill-mode | forwards |
<div data-sa="from-left">from-left</div>
<div data-sa="from-right">from-right</div>
<div data-sa="from-top">from-top</div>
<div data-sa="from-bottom">from-bottom</div>
<div data-sa="flip-left">flip-left</div>
<div data-sa="flip-right">flip-right</div>
<div data-sa="flip-top">flip-top</div>
<div data-sa="flip-bottom">flip-bottom</div>
<div data-sa="scale">scale</div>
<div data-sa="fade">fade</div>모든 속성은 data-sa-*로 사용합니다.
<div
data-sa-offset="400"
data-sa-delay="50"
data-sa-duration="1000"
data-sa-once="false"
>
</div><div data-sa-offset="300"></div>data-sa-from-position에 사용 가능합니다. (from-left, from-top, ...)
해당 앨리먼트가 n만큼 먼 곳에서부터 애니메이션이 실행됩니다.
기본값은 200이며, 50부터 1000까지 가능합니다.
숫자형으로 들어와야 하며, 단위는 px입니다.
<div data-sa-delay="1500"></div>앨리먼트의 애니메이션이 n초 후 실행됩니다.
기본값은 0이며, 500부터 10000까지 가능합니다.
숫자형으로 들어와야 하며, 단위는 ms입니다.
<div data-sa-duration="2000"></div>앨리먼트의 애니메이션이 n초동안 지속됩니다.
기본값은 1000이며, 500부터 10000까지 가능합니다.
숫자형으로 들어와야 하며, 단위는 ms입니다.
<div data-sa-once="true"></div>앨리먼트의 애니메이션이 스크롤에 따라 반복됩니다.
기본값은 true이며, boolean입니다.
<div data-sa-time="ease-out"></div>앨리먼트에 애니메이션의 전환방법을 변경합니다.
기본값은 ease이며, ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end'] 중에서 사용 가능합니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent