参考にしたい！アニメーションの動きが気持ちいいスクリプト

最近のWebサイトでは、様々なアニメーションを付けることが当たり前になってきました。リンクやボタンのホバー時、ページの遷移、スクロールなどに使われていることが多いですね。

制作しているWebサイトにアニメーションを取り入れたい時に、是非参考にしたいスクリプトをご紹介します。

メニュー

Menu 01

Facebookなどのスマートフォンのアプリによく使わている横からスライドしてくるメニュー。最近ではPCサイトでも使われているのをよく見かけます。

Off-Canvasを利用したメニューエフェクト。綺麗な曲線をなどアニメーションがとっても綺麗なスクリプトです。

縦、横にコンテンツをスクロールできるようになります。

スクロール位置やセクションごとに、指定した要素のデザインやフォント、色などを変えることできるjQueryプラグイン。デモサイトではロゴを利用して、背景ごとにデザインが変わっていくようになっています。使い方次第では面白いかもしれません。

フルスクリーンで丸ごと、紙芝居っぽくスクロール機能をつけてる事ができる。スクロールだけでなく、ナビゲーションをクリックすることでそのページにアンカーさせることができます。

14種類のサンプルからプログレスバーから簡単に導入することできます。ページ遷移、画像の切り替えなど様々なシーンで使えます。

ページ遷移時のアニメーションを付けることができるjQueryプラグインです。全26種類あります。

フェードイン・フェードアウトなどスタンダードのものから、回転、ズーム、フェードダウンなど様々なアニメーションがあります。少し眺めているだけでも参考になります。

こちらはページ遷移・画面遷移などのローディングエフェクト。動きがすごく気持ちいです。

classを付加するだけで多彩なアニメーションを使用できるスタイルシート。

ブルブル、フラッシュ、フェードイン、フェードアウト、バウンド、回転など様々なアニメーションがデモサイトから確認することができます。