anime.js - 軽量、多機能なアニメーションライブラリ
Webの表現力が向上しているのを実感できるものの一つにアニメーションが挙げられます。これまではFlashであったりJavaScriptで無理矢理DOMを動かしていましたが、CSS3やSVGによってスムーズなアニメーションが実現できています。とは言え、アニメーションを作るのは大変です。 今回は軽量なアニメーションライブラリ、anime.jsを紹介します。
anime.jsについて
デモを紹介します。まずはHTMLタグによるアニメーション。
こちらはSVGを動的に書き換えてアニメーションさせています。
こちらもHTMLを書き換えています。レスポンシブで、ウィンドウ幅によって描かれ方が変わるのが面白いです。
ログインフォームにアニメーション。
文字が落ちてくるアニメーション。
スクロール連動型アニメーション。
有機的なアニメーション。
スライダーと画像を組み合わせたデモ。
テキストアニメーション。
anime.jsは実に多彩で、HTML/CSS/SVG/JavaScriptオブジェクトなど様々な要素でアニメーションを実現できます。DOMの場合は重なり具合もサポートされていたり、キーフレームベースのアニメーションも簡単に実現できます。何より軽量というのが売りになっており、使いやすいライブラリとなっています。
anime.jsはJS製のオープンソース・ソフトウェア(MIT License)です。
anime.js • JavaScript animation engine juliangarnier/anime: JavaScript animation engine