es-sa

쉽고 간편한 스크롤 애니메이션 라이브러리

Demo

CDN

css

``html


`

javascript

`html


`

Use

@threshold?: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1

`js
import './sa.css';
import SaBox from './SaBox';
import { ESSA } from './es-sa';

const contents = () => {
useEffect(() => {
ESSA.init();
}, []);

return (
className="box"
type="from-bottom"
duration="200"
delay="100"
time="ease-in-out"
once="false"
/>
)
}
`

Animation value

|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|

Type

`html

모든 속성은 data-sa-*로 사용합니다.

`html

data-sa-offset="400"
data-sa-delay="50"
data-sa-duration="1000"
data-sa-once="false"
>