ページやブロック要素の切り替えがかっこいいプラグイン6選(jQuery・JSなど)


ページやブロック要素の切り替えがかっこいいプラグイン6選(jQuery・JSなど)

お疲れさまです、デザイナーのモモコです。

今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。
数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。

要素の切り替えがかっこいいプラグイン・スクリプト6選

Animsition

1

簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。
フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。

iconate

2

クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。
全部で19種類のアニメーションがそろっています。
スマホサイトでよく見るハンバーガーメニューからのクローズボタンなども簡単に実装できそうです。

AnimateTransition

3

ブロック要素の切り替えとポップアップにアニメーションがつけられるJSプラグイン。
スライド、カバーなどよく使うアニメーションが12種類そろっています。
ポップアップの方は8種類用意されており、オーバーレイの有無も選択できます。

Space.js

4

画面をスクロールしていく際、要素にスタイリッシュなアニメーションがつけられるjQueryプラグイン。
画像やテキストなどさまざまな部分にフェード、スライド、ズームなど多彩なアニメーションが付いています。
用意されているデモ2つがとてもかっこいいです。

SCROLLIFY

5

気持ちいい画面遷移(スクロール)が実現できるjQueryプラグイン。
1スクロールで開いた画面サイズに合わせて要素が移動します。
対応ブラウザがIE7以上となっており、幅広く利用できそうです。

Perspective Mockup Slideshow

6

モックアップの端末画面内で要素を切り替えて表示できる、スライドショーのスクリプト。
CSS3を主に使用しているため、モダンブラウザのみの対応となりますが、デモが素敵だったので紹介させていただきました。

まとめ

いかがでしたでしょうか。
効果的なアニメーションをつけることで、コンテンツの見せ方も広がりそうですね。
ユーザが使いやすいサイト制作ができるよう邁進していきたいです。

この記事を書いた人

モモコ
モモコ デザイナー 2010年入社
デザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。