アニメーションをWebサイトに取り入れることによってより豊かな表現が可能になります。フラットデザインやミニマムデザインといったシンプルなデザインがトレンドになっている中、ちょっとしたアクセントとして「動き」のアニメーションを取り入れるWebサイトが増えてきました。
今回は、是非サイトに取り入れたくなるようなアニメーションのライブラリをまとめました。
ライセンスなどの確認は各自お願いいたします。
レイアウト
SALVATTORE
レンガ状に並んだレイアウトを綺麗に敷き詰めてくれるライブラリ。ウィンドウの幅によって各ボックスサイズとカラム数を調整しくれる。レスポンシブに対応しています。
スクロール
Story Box
ページスクロールによって、指定した要素に様々なアニメーションを付加しながら表示することができる。横、ナナメ、下からなど気持ちがいいアニメーションでコンテンツをダイナミックに表現できそうです。
ADAPTIVE BACKGROUNDS
指定した画像からカラーを抽出して、背景色として変更してくれるjQueryプラグイン。iTunesなどに使わているのが有名ですね。
OVERSCROLL.JS
スクロール領域を超えた時に、バウンドをしたようなエフェクトを付けることができるプラグイン。サンプルでは、スクロールできる領域を超えたら猫が少し顔をだすという可愛い演出がされています。こういう使い方もありなんですね◎
プログレスバー
Scrolline.js
画像だと少しわかりづらいですので、上記のデモを見ていただきたいのですが、ヘッダー上部にあるプログレスバーがページのスクロール位置によって伸びていきます。スクロールバーをヘッダーで工夫しているのかなと思います。
パララックス
Parallax-Scroll
背景の画像を用いたパララックスサイトの際に使えるそうです。スマホにも対応しとってもスムーズに動きレスポンシブにすることが可能です。
Curved Cut
ブロック要素を湾曲させることができ、スクロールすると湾曲部分が緩やかになってくる。とっても素敵◎
メニュー
Bouncy Navigation
最近では、スマホメニューは文字が並んでいるリストタイプのものだけでなく、アイコンを利用したメニューも増えてきました。Bouncy Navigationは全画面上にオーバーレイし、アイコンを用いて飛んでくるようなアニメーションを取り入れたメニューリストです。
エフェクト
Subtle Click Feedback Effects
Googleが提唱するマテリアルデザインに採用されている波紋に広がるエフェクトを実装できるスクリプト。様々なエフェクトが用意されています。
Waves
こちらも同様、波紋のエフェクトを実装できるスクリプトです。ボタンや画像にも適用することできます。
ローディング
fakeLoader.js
ページの読み込みの際に様々なローディングアニメーションを付けることができる。ローディングアニメーションを取り入れることによって体感速度の軽減、Webサイト全体のブランディングにも繋がります。