es-sa

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

Demo

CDN

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>   

Use

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

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

const contents = () => {
  useEffect(() => {
    ESSA.init();
  }, []);
  
  return (
    <SaBox
      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

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

Property

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

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

data-sa-offset

<div data-sa-offset="300"></div>

data-sa-from-position에 사용 가능합니다. (from-left, from-top, ...)

해당 앨리먼트가 n만큼 먼 곳에서부터 애니메이션이 실행됩니다.

기본값은 200이며, 50부터 1000까지 가능합니다.

숫자형으로 들어와야 하며, 단위는 px입니다.

data-sa-delay

<div data-sa-delay="1500"></div>

앨리먼트의 애니메이션이 n초 후 실행됩니다.

기본값은 0이며, 500부터 10000까지 가능합니다.

숫자형으로 들어와야 하며, 단위는 ms입니다.

data-sa-duration

<div data-sa-duration="2000"></div>

앨리먼트의 애니메이션이 n초동안 지속됩니다.

기본값은 1000이며, 500부터 10000까지 가능합니다.

숫자형으로 들어와야 하며, 단위는 ms입니다.

data-sa-once

<div data-sa-once="true"></div>

앨리먼트의 애니메이션이 스크롤에 따라 반복됩니다.

기본값은 true이며, boolean입니다.

data-sa-time

<div data-sa-time="ease-out"></div>

앨리먼트에 애니메이션의 전환방법을 변경합니다.

기본값은 ease이며, ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end'] 중에서 사용 가능합니다.