アニメーションを取り入れるときの参考にしたいライブラリまとめ

animation-js-library_mv

アニメーションをWebサイトに取り入れることによってより豊かな表現が可能になります。フラットデザインやミニマムデザインといったシンプルなデザインがトレンドになっている中、ちょっとしたアクセントとして「動き」のアニメーションを取り入れるWebサイトが増えてきました。

今回は、是非サイトに取り入れたくなるようなアニメーションのライブラリをまとめました。

ライセンスなどの確認は各自お願いいたします。

レイアウト

SALVATTORE

Animation js library 01

DEMO SOURCE

レンガ状に並んだレイアウトを綺麗に敷き詰めてくれるライブラリ。ウィンドウの幅によって各ボックスサイズとカラム数を調整しくれる。レスポンシブに対応しています。

スクロール

Story Box

Animation js library 07

DEMO SOURCE

ページスクロールによって、指定した要素に様々なアニメーションを付加しながら表示することができる。横、ナナメ、下からなど気持ちがいいアニメーションでコンテンツをダイナミックに表現できそうです。

ADAPTIVE BACKGROUNDS

Jquery adaptive backgrounds js  A jQuery plugin for extracting dominant colors from images and applying it to its parent

DEMO SOURCE

指定した画像からカラーを抽出して、背景色として変更してくれるjQueryプラグイン。iTunesなどに使わているのが有名ですね。

OVERSCROLL.JS

Animation js library 11

DEMO SOURCE

スクロール領域を超えた時に、バウンドをしたようなエフェクトを付けることができるプラグイン。サンプルでは、スクロールできる領域を超えたら猫が少し顔をだすという可愛い演出がされています。こういう使い方もありなんですね◎

プログレスバー

Scrolline.js

Animation js library 02

DEMO SOURCE

画像だと少しわかりづらいですので、上記のデモを見ていただきたいのですが、ヘッダー上部にあるプログレスバーがページのスクロール位置によって伸びていきます。スクロールバーをヘッダーで工夫しているのかなと思います。

パララックス

Parallax-Scroll

Animation js library 03

DEMO SOURCE

背景の画像を用いたパララックスサイトの際に使えるそうです。スマホにも対応しとってもスムーズに動きレスポンシブにすることが可能です。

Curved Cut

Animation js library 08

DEMO SOURCE

ブロック要素を湾曲させることができ、スクロールすると湾曲部分が緩やかになってくる。とっても素敵◎

メニュー

Bouncy Navigation

Animation js library 04

DEMO SOURCE

最近では、スマホメニューは文字が並んでいるリストタイプのものだけでなく、アイコンを利用したメニューも増えてきました。Bouncy Navigationは全画面上にオーバーレイし、アイコンを用いて飛んでくるようなアニメーションを取り入れたメニューリストです。

エフェクト

Subtle Click Feedback Effects

Animation js library 05

DEMO SOURCE

Googleが提唱するマテリアルデザインに採用されている波紋に広がるエフェクトを実装できるスクリプト。様々なエフェクトが用意されています。

Waves

Animation js library 06

DEMO SOURCE

こちらも同様、波紋のエフェクトを実装できるスクリプトです。ボタンや画像にも適用することできます。

ローディング

fakeLoader.js

Animation js library 09

DEMO SOURCE

ページの読み込みの際に様々なローディングアニメーションを付けることができる。ローディングアニメーションを取り入れることによって体感速度の軽減、Webサイト全体のブランディングにも繋がります。