Career要素の切り替えを美しく表現するプラグイン・エフェクト5選モモコ2014.06.12Web制作デザインShareお疲れさまです、デザイナーのモモコです。今回は要素の切り替えや表示を美しく表現するCSSスタイル・JSプラグインやエフェクトを5つご紹介します。要素の切り替えや表示を美しく表現するプラグイン・エフェクト5選fullPage.jshttps://alvarotrigo.com/fullPage/フルスクリーン表示のページを切り替えるプラグイン。DEMOのシンプルな切り替えの他にも、ヘッダーを固定した場合や、動画を背景に表示する場合など様々な用途のオプションが用意されており、とても使い勝手が良さそうです。Separatorshttps://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/主にCSSとCSS3で装飾した要素ごとの区切り線がまとめられています。約25種類ほど用意されており、汎用性のあるものが多いです。フラットなデザインに変化を持たせたい時に活用できそうですね。Transitionshttps://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ページをスタイリッシュに切り替えるエフェクトがまとめられています。EASING」「SCALE」「ROTATE」「SLIDE」の6つのカテゴリー+各方向・イン/アウトが用意されています。モダンブラウザやスマートフォン用サイトでスタイリッシュな切り替えを行うときにいかがでしょうか。ScrollMagichttps://janpaepke.github.io/ScrollMagic/スクロールに合わせて様々なクオリティの高いエフェクトを付けられるプラグイン。ワイプや背景色変更、パララックスなど切り替え時に使えるものも用意されています。Magicという名前に合ったシルクハットとステッキが可愛らしいですね。Effectshttps://tympanus.net/codrops/2014/05/22/inspiration-for-article-intro-effects/ヘッダー部分から本文へ移動する際の動きを想定して作られたエフェクトがまとめられています。全部で7パターン用意されており、どのデモもクオリティが高く今すぐに使ってみたくなります!リッチな読み物コンテンツを制作する際には是非使ってみたいエフェクトの1つです。まとめいかがでしたでしょうか。CSS3を使用したエフェクトが多く、モダンブラウザ以外への対応が必要になってしまいますが、新しい技術を取り入れ、気持ちのいい動きをするサイト作りを心がけたいですね。LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。このメンバーの記事をもっと読むデザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。PopularPR連載一覧イベント情報Web制作デザインTechnologyAIオウンドメディアSEO対策アプリ開発システム。