영상 강좌를 보다가 알 수 없는 알고리즘의 안내로 신박한 영상을 봤는데 그것이 자바스크립트 애니메이션 라이브러리 anime.js 이다. 라이브러리를 이용한 다양한 애니메이션 강좌를 하고 있는데 그대로 따라만해도 자신의 홈페이지에 화려한 애니메이션 구사가 가능하다.
anime.js
anime.js 는 간단하고 경량화된 자바스크립트 애니메이션 라이브러리로, css 속성과 svg, dom 속성, 자바스크립트 오브젝트를 기반으로 동작합니다.
역시, 이곳에서도 만들고 쉽고, 배우기 쉽고, 빠르게 적용할 수 있다고 합니다만, 이 문제는 어디까지나 개발자가 따라해야 하는 문제이기도 합니다.
튜토리얼 메뉴얼 문서
문서는 당연히 영어로 되어 있지만 코드 위주와 결과화면을 같이 보여주기 때문에 빠르게 살펴보고 마음에 드는 것을 골라 사용할 수 있도록 하였습니다. 당연히 css 와 자바스크립트만을 사용하고 있기 때문에 별도의 수정없이도 화려한 홈페이지를 연출할 수 있습니다.
샘플은 코드펜에서 직접 확인
자바스크립트 애니메이션 라이브러리인 anime.js 는 코드펜에 별도의 샘플과 활용법, 응용한 소스코드들 업로드 하였습니다. 코드펜에 계정이 있다면 코드를 그대로 사용하여 결과를 바로 확인하고 수정을 하여 자신이 원하는 것을 만들어 낼 수도 있습니다.
사용방법
검색포털 구글에서 anime.js 를 검색하여 홈페이지로 이동합니다.
화면 우측 상단의 download anime.js 버튼을 클릭하여 파일을 다운 받습니다.
적용할 html 파일에서 해당 파일을 불러온 후 코딩을 해 주면 됩니다.
어렵지 않기 때문에 그냥 사용해도 무방한 것들이 많이 있습니다.
화려한 홈페이지를 원할 경우 이 애니메이션 라이브러리는 활용도가 높습니다.
정작, 이것저것 찾아보면 이것 뿐만이 아니라 더 다 많은 라이브러리들도 있습니다.
'programming > web' 카테고리의 다른 글
html5 기본 템플릿 만들기 template (0) | 2021.04.16 |
---|---|
html5 뷰포트 반응형 웹페이지 만들기 viewport responsive webpage (0) | 2021.03.23 |
html5 독학 빠르게 익히는 방법 (0) | 2021.02.18 |
html5 문서 구조 살펴보기 (0) | 2021.02.17 |
홈페이지 필수 html5 css3 자바스크립트 / Homepage javascript (0) | 2021.02.16 |
댓글