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

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

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

サイトのキャプチャ

Agile
Agile -GitHub

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

サイトのキャプチャ

Collie

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

サイトのキャプチャ

Velocity.js
Velocity.js -GitHub

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

サイトのキャプチャ

Matter.js
Matter.js -GitHub

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

サイトのキャプチャ

scrollReveal.js
scrollReveal.js -GitHub

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

サイトのキャプチャ

WOW.js
WOW.js -GitHub

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

サイトのキャプチャ

Stellar.js
Stellar.js -GitHub

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

サイトのキャプチャ

clickstream
clickstream -GitHub

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

サイトのキャプチャ

panelSnap
panelSnap -GitHub

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

サイトのキャプチャ

SVG.js
SVG.js -GitHub

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

サイトのキャプチャ

Snap.svg
Snap.svg -GitHub

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

sponsors

top of page

©2018 coliss