最近のWebサイトでは、様々なアニメーションを付けることが当たり前になってきました。リンクやボタンのホバー時、ページの遷移、スクロールなどに使われていることが多いですね。
制作しているWebサイトにアニメーションを取り入れたい時に、是非参考にしたいスクリプトをご紹介します。
メニュー
mmenu
Facebookなどのスマートフォンのアプリによく使わている横からスライドしてくるメニュー。最近ではPCサイトでも使われているのをよく見かけます。
Off-Canvas Menu Effects
Off-Canvasを利用したメニューエフェクト。綺麗な曲線をなどアニメーションがとっても綺麗なスクリプトです。
スクロール
JQUERY FULL CONTENT
縦、横にコンテンツをスクロールできるようになります。
MIDNIGHT.JS
スクロール位置やセクションごとに、指定した要素のデザインやフォント、色などを変えることできるjQueryプラグイン。デモサイトではロゴを利用して、背景ごとにデザインが変わっていくようになっています。使い方次第では面白いかもしれません。
pagePiling.js
フルスクリーンで丸ごと、紙芝居っぽくスクロール機能をつけてる事ができる。スクロールだけでなく、ナビゲーションをクリックすることでそのページにアンカーさせることができます。
プログレスバー
PACE
14種類のサンプルからプログレスバーから簡単に導入することできます。ページ遷移、画像の切り替えなど様々なシーンで使えます。
ページ遷移
Animsition
ページ遷移時のアニメーションを付けることができるjQueryプラグインです。全26種類あります。
フェードイン・フェードアウトなどスタンダードのものから、回転、ズーム、フェードダウンなど様々なアニメーションがあります。少し眺めているだけでも参考になります。
Page Loading Effects
こちらはページ遷移・画面遷移などのローディングエフェクト。動きがすごく気持ちいです。
CSSアニメーション
Animate.css
classを付加するだけで多彩なアニメーションを使用できるスタイルシート。
ブルブル、フラッシュ、フェードイン、フェードアウト、バウンド、回転など様々なアニメーションがデモサイトから確認することができます。