본문 바로가기
programming/web

자바스크립트 애니메이션 라이브러리 anime.js javascript animation library

by 개코 - 개발과 코딩 2021. 2. 20.

영상 강좌를 보다가 알 수 없는 알고리즘의 안내로 신박한 영상을 봤는데 그것이 자바스크립트 애니메이션 라이브러리 anime.js 이다. 라이브러리를 이용한 다양한 애니메이션 강좌를 하고 있는데 그대로 따라만해도 자신의 홈페이지에 화려한 애니메이션 구사가 가능하다.

anime.js

anime.js 는 간단하고 경량화된 자바스크립트 애니메이션 라이브러리로, css 속성과 svg, dom 속성, 자바스크립트 오브젝트를 기반으로 동작합니다.
역시, 이곳에서도 만들고 쉽고, 배우기 쉽고, 빠르게 적용할 수 있다고 합니다만, 이 문제는 어디까지나 개발자가 따라해야 하는 문제이기도 합니다.

튜토리얼 메뉴얼 문서

문서는 당연히 영어로 되어 있지만 코드 위주와 결과화면을 같이 보여주기 때문에 빠르게 살펴보고 마음에 드는 것을 골라 사용할 수 있도록 하였습니다. 당연히 css 와 자바스크립트만을 사용하고 있기 때문에 별도의 수정없이도 화려한 홈페이지를 연출할 수 있습니다.

샘플은 코드펜에서 직접 확인

자바스크립트 애니메이션 라이브러리인 anime.js 는 코드펜에 별도의 샘플과 활용법, 응용한 소스코드들 업로드 하였습니다. 코드펜에 계정이 있다면 코드를 그대로 사용하여 결과를 바로 확인하고 수정을 하여 자신이 원하는 것을 만들어 낼 수도 있습니다.

사용방법

검색포털 구글에서 anime.js 를 검색하여 홈페이지로 이동합니다.
화면 우측 상단의 download anime.js 버튼을 클릭하여 파일을 다운 받습니다.
적용할 html 파일에서 해당 파일을 불러온 후 코딩을 해 주면 됩니다.

어렵지 않기 때문에 그냥 사용해도 무방한 것들이 많이 있습니다.
화려한 홈페이지를 원할 경우 이 애니메이션 라이브러리는 활용도가 높습니다.
정작, 이것저것 찾아보면 이것 뿐만이 아니라 더 다 많은 라이브러리들도 있습니다.

반응형

댓글