글자 및 단어 단위의 키네틱 ~ 논문 <예제 1>

예제 1은 html 페이지 내의 버튼에 클릭 이벤트가 발생하게 되면 단어 단위로 분리된 텍스트 객체들이 왼쪽에서 오른쪽 방향으로 일렬로 배치가 되어 첫번째 단어와 두번재 단어가 각각 0.5초와 0.7초 후에 크기가 커지는 예제

 

var content = document.getElementById('testText').innerHTML;;

=> Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.

var motionFunc = "kitySinglePlay(kityStaticScale(targetDIV.childNodes[i], 
								+ {scale : 40, duration : 0.7, goBack :
                                +true }), {delay : timeSet[i] })";

=> kityStaticScale  함수 : 글자의 크기를 변화 시키는 함수 

0.7초 동안 40만큼 증가했다가 다시 원래대로 돌아옴