[splitting.js] 요소를 분할해주는 라이브러리

움직이는 애니메이션을 제공하는 라이브러리가 아니라. 요소를 분할해주는 라이브러리입니다.

<div data-splitting>안녕하세요.</div>

<script> Splitting(); </script>

해당 라이브러리를 사용하면.

<div data-splitting="" class="words chars splitting" style="--word-total:1; --char-total:6;">
  <span class="word" data-word="안녕하세요." style="--word-index:0;">
    <span class="char" data-char="안" style="--char-index:0;">안</span>
    <span class="char" data-char="녕" style="--char-index:1;">녕</span>
    <span class="char" data-char="하" style="--char-index:2;">하</span>
    <span class="char" data-char="세" style="--char-index:3;">세</span>
    <span class="char" data-char="요" style="--char-index:4;">요</span>
    <span class="char" data-char="." style="--char-index:5;">.</span>
  </span>
</div>

이런식으로 해당 요소를 분할해줍니다. 여기에 CSS 애니메이션과 애니메이션 딜레이를 사용하여 움직임을 줄 수 있습니다. CSS 사용자 지정속성 사용으로 IE에서는 작동하지 않습니다.

출처: splitting.js.org/

참고: www.youtube.com/watch?v=ySrbvSf0xiA&ab_channel=DesignCourse