초스피드 애니메이팅 구현 『Josh.js』

 

josh.js는 웹 페이지의 애니메이팅을 아주 빠른 속도로 처리할 수 있는 자바스크립트 라이브러리다. 폰트관련 모션그래픽(타이포그래피)이 필요하다면 josh.js가 딱이다. 

 

• No jQuery Dependency
• Written on ES6(Compiled ES5 version available)
• Very much lightweight, Only 2KB 😘
• Animate using Animate.css library
• You can use your own CSS animation library
• Work on newly created DOM

기타 애니메이팅 라이브러리와 달리 무거운 제이쿼리를 사용하지 않고, animate.css를 사용한다. ES5, ES6를 지원하고, 용량은 무려 2kb밖에 되지 않는다. 사용법 역시 간단하다. animate.css의 클래스를 DOM에 삽입하는 방식으로 사용할 수 있다. 즉, josh.js는 가볍고 빠르다. 

 

https://github.com/mamunhpath/josh.js

mamunhpath/josh.js

 

---

구현

CDN방식으로 josh.js를 사용해보자. CDN주소는 다음과 같다. 

<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css"> <script src="cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script>

CDN을 붙였다면, Josh의 인스턴스 객체를 생성하고, 기본 속성값을 입력한다.

<script>    const josh = new Josh({         initClass: "josh-js",         animateInMobile: true,         offset: 0.3,         onDOMChange: true       }); </script>

 

중요한 것은 지금부터다. josh 깃허브의 index.html을 참고하여 아래와 같은 클래스명과 data값을 입력해보자. 클래스명은 animate.css의 클래스를 그대로 사용한다. animate.css 홈페이지에서 관련된 클래스명을 검색할 수 있다. 

 

https://animate.style/

Animate.css

<div class="element josh-js"                  data-josh-anim-name="lightSpeedInRight"                 data-josh-duration="1500ms"                 data-josh-anim-delay="3.5s"                 data-josh-iteration="infinite"> Written on ES6 </div> <div class="element josh-js" style="background: #ffe9c5; color: #444;"                  data-josh-anim-name="zoomInDown"                 data-josh-anim-delay="3.5s">  Let's start scrolling! </div>

Written on ES6

Let's start scrolling!

 

 

크기를 조절하면서 html태그와 혼용해서 사용한다면, 적어도 애니메이팅 효과를 넣는 수준에서는 괜찮은 듯하다. 화면을 gif로 만들어주는 라이브러리 기능과 섞는다면 타이포그래피 짤방을 만들 수 있을 것 같다.