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

animation-css-jquery-script2

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

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

メニュー

mmenu

Menu 01

DEMO SOURCE

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

Off-Canvas Menu Effects

Menu 02

DEMO SOURCE

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

スクロール

JQUERY FULL CONTENT

Scroll 01

DEMO SOURCE

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

MIDNIGHT.JS 

MIDNIGHT.JS

DEMO SOURCE

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

pagePiling.js

pagePiling

DEMO SOURCE

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

プログレスバー

PACE

Proglessbar 01

DEMO SOURCE

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

ページ遷移

Animsition

Animsition

DEMO SOURCE

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

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

Page Loading Effects

Page 02

DEMO SOURCE

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

CSSアニメーション

Animate.css

Animate css

DEMOSOURCE

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

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