次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ

Post on:2014年5月2日

sponsors

最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。

スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。

SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。

デスクトップとスマフォでアニメーションやゲームを実装できる、HTML5ベースのJavaScriptライブラリ。チュートリアルが充実しているので、勉強にもよさそうです。

CSSアニメーションのライブラリより速く動作するよう、jQueryで$.animate()を再実行してパフォーマンスを向上させます。
↑はデモページで、キャプチャは地味ですが128個のdivの動きが感動的です。

HTML5ベースの2D物理演算エンジンのスクリプト。
デモは26種類（左上のセレクトメニューから）が用意されており、キャプチャの「Solid Rendering」ではさまざまな形の浮遊感を楽しめたり、布がゆらゆら揺れたり、振り子の動きなどいろいろなインタラクションが楽しめます。

Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させる単体で動作するスクリプト。要素ごとにアニメーションの方向・移動距離・位置・時間を設定できるので、複雑なアニメーションも簡単にセットできます。

ページを表示した時やスクロールした時など、ページ上の要素がビューポートに表示された時に各要素にさまざまなアニメーションをセットする超軽量（3KB）スクリプト。アニメーションの動きは「Animate.cssを使い、そのトリガーを設定します。

垂直スクロールだけでなく、水平スクロールでもアニメーションを使いたい人はコレ。垂直・水平のパララックスやカーテンのエフェクトが実装できます。Mobile WebKitに対応しているのでスマフォでもOK。

ページを表示する時、離脱する時にさまざまなアニメーションを加えるjQueryの国産プラグイン。ページを上、右、下、左からふわりとスライドさせたり、フェードで表示します。

複数のコンテンツを垂直に配置したスクロール前提のページで困るのが、ユーザーがちょうどいい位置にスクロールしてくれないこと。
スクロールしてコンテンツが中途半端に表示されても、ベストなポジションに自動でスナップさせます。

SVGで画像にさまざまなエフェクトあたえたり、ちょっとしたインタラクションを伴ったアニメーションを手軽に実装できる単体のスクリプト。
SVGデビューしたい人は、これからはじめるといいかも。

Adobe社製のSVGを使ったさまざまなコンテンツを実装できるJavaScriptライブラリ。インタラクティブなコンテンツやゲームなど、デモページでたくさん楽しめます。SVGすごい！