애니메이션 라이브러리 (TypeIt, ScrollOut, Anime, Rellax, GreenSock)

TypeIt

웹사이트 포인트 문구 애니메이션 효과(타이핑효과)

 

https://www.typeitjs.com/

TypeIt

특징: 

용량 4kb도 안됨

의존성 필요x

 

 

TypeIt → Demos메뉴 see it 에서 활용 방법 확인

 

사용방법 

TypeIt → Documentation메뉴 → Vanilla Javascript(외부 라이브러리나 프레임워크를 사용하지 않은 순수 자바스크립트)

 

TypeIt cdn

 

사용방법

html파일에 위에 스크립트 주소를 복사해서 head태그 안에 붙여주고 

 

TypeIt 사용예시

 

ScrollOut

스크롤링시 애니메이션 효과

 

https://scroll-out.github.io/

ScrollOut

 

css속성이나 변수를 이용해 손쉽게 사용

용량 1kb도 안됨

프레임워크에 상관없이 부분적으로 사용가능

 

메인페이지 → Get Scrolling 클릭

 

사용하려는 요소에 data-scroll속성을 붙이고

자바스크립트에서 ScrollOut()함수를 부른다

ScrollOut cdn

 

 

scrollout사용예시

 

https://codepen.io/

다양한 방식으로 애니메이션 효과구현 코드를 확인가능하다

(여러가지 라이브러리를 사용한 애니메이션 효과)

 

 

 

Anime.js

https://animejs.com/

css속성, svg, dom요소 자바스크립트 객체에 사용 가능

제공하는 애니메이션 효과 중 필요한것 가져다 쓰기

<script src="anime.min.js"></script>

라이브러리 추가후 사용

 

rellax

https://greensock.com/

페이지 스크롤시 속도 조절을 할수있다.

요소마다 스크롤되는 속도를 조절 할 수있다. 

npm이나 cdn사용

rellax cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>

 

 

var rellax = new Rellax('.rellax');

오브젝트 생성 후에

<div class="rellax" data-rellax-speed="-3">
  I’m slow and smooth
</div>

<div class="rellax" data-rellax-speed="7">
  I’m super fast!!
</div>

<div class="rellax" data-rellax-speed="-5">
  I’m extra slow and smooth
</div>

rellax로 지정 후 각각의 속도를 지정할수 있다 (기본값은 -2)

음수일수록 스크롤 속도 느리고 양수일수록 스크롤 속도가 빠름

GreenSock

https://greensock.com/

cdn링크를 이용하거나 npm을 이용해서 사용 가능

다양한 플러그인 존재

문서에서 튜토리얼별로 영상이 있다. 

 

 

 

 

 

 

 

 

 

 

 

 

출처. 유튜브 드림코딩

https://www.youtube.com/watch?v=wbDpZwDRgRk&t=621s