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

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

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

レイアウト

SALVATTORE

DEMO SOURCE

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

スクロール

Story Box

DEMO SOURCE

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

ADAPTIVE BACKGROUNDS

DEMO SOURCE

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

OVERSCROLL.JS

DEMO SOURCE

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

プログレスバー

Scrolline.js

DEMO SOURCE

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

パララックス

Parallax-Scroll

DEMO SOURCE

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

Curved Cut

DEMO SOURCE

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

メニュー

Bouncy Navigation

DEMO SOURCE

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

エフェクト

Subtle Click Feedback Effects

DEMO SOURCE

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

Waves

DEMO SOURCE

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

ローディング

fakeLoader.js

DEMO SOURCE

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