お疲れさまです、デザイナーのモモコです。
今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。
数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。
要素の切り替えがかっこいいプラグイン・スクリプト6選
Animsition
http://git.blivesta.com/animsition/
簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。
フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。
iconate
http://bitshadow.github.io/iconate/
クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。
全部で19種類のアニメーションがそろっています。
スマホサイトでよく見るハンバーガーメニューからのクローズボタンなども簡単に実装できそうです。
AnimateTransition
http://rapid-application-development-js.github.io/AnimateTransition/
ブロック要素の切り替えとポップアップにアニメーションがつけられるJSプラグイン。
スライド、カバーなどよく使うアニメーションが12種類そろっています。
ポップアップの方は8種類用意されており、オーバーレイの有無も選択できます。
Space.js
http://www.slashie.org/space.js/
画面をスクロールしていく際、要素にスタイリッシュなアニメーションがつけられるjQueryプラグイン。
画像やテキストなどさまざまな部分にフェード、スライド、ズームなど多彩なアニメーションが付いています。
用意されているデモ2つがとてもかっこいいです。
SCROLLIFY
http://projects.lukehaas.me/scrollify/
気持ちいい画面遷移（スクロール）が実現できるjQueryプラグイン。
1スクロールで開いた画面サイズに合わせて要素が移動します。
対応ブラウザがIE7以上となっており、幅広く利用できそうです。
Perspective Mockup Slideshow
http://tympanus.net/codrops/2014/11/21/perspective-mockup-slideshow/
モックアップの端末画面内で要素を切り替えて表示できる、スライドショーのスクリプト。
CSS3を主に使用しているため、モダンブラウザのみの対応となりますが、デモが素敵だったので紹介させていただきました。
まとめ
いかがでしたでしょうか。
効果的なアニメーションをつけることで、コンテンツの見せ方も広がりそうですね。
ユーザが使いやすいサイト制作ができるよう邁進していきたいです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
