[Javascript] splitting.js 적용법

 

 

참조

https://splitting.js.org/

 

1. HTML에서 적용할 부분을 <div></div>로 묶고 data-splitting을 적는다

<h2>
	<div data-splitting="">Commit to developing</div>
  <div data-splitting="">the newest technologies and</div>
  <div data-splitting="">build a more prosperous future</div>
</h2>

 

2. 모션을 줄 곳. css에 .char 나 .word를 작성 (.char는 낱글자, .word는 단어에 애니메이션을 적용한다.)

h2 .char {
display: inline-block;
  animation: slide-up 1s cubic-bezier(.10, 0, .10, 1) both; 
  animation-delay: calc(60ms * var(--char-index));
}

3.  js에 splitting();을 호출한다.

//splitting.js
$(function(){
    Splitting();
});