WEB

要素の切り替えを美しく表現するプラグイン・エフェクト5選

要素の切り替えを美しく表現するプラグイン・エフェクト5選

お疲れさまです、デザイナーのモモコです。
今回は要素の切り替えや表示を美しく表現するCSSスタイル・JSプラグインやエフェクトを5つご紹介します。

要素の切り替えや表示を美しく表現するプラグイン・エフェクト5選

fullPage.js

fullPage.js

フルスクリーン表示のページを切り替えるプラグイン。

DEMOのシンプルな切り替えの他にも、ヘッダーを固定した場合や、動画を背景に表示する場合など様々な用途のオプションが用意されており、とても使い勝手が良さそうです。

Section Separators

Section Separators

主にCSSとCSS3で装飾した要素ごとの区切り線がまとめられています。

約25種類ほど用意されており、汎用性のあるものが多いです。フラットなデザインに変化を持たせたい時に活用できそうですね。

A Collection of Page Transitions

A Collection of Page Transitions

ページをスタイリッシュに切り替えるエフェクトがまとめられています。

「MOVE」「FADE」「DIFFERENT EASING」「SCALE」「ROTATE」「SLIDE」の6つのカテゴリー+各方向・イン/アウトが用意されています。

モダンブラウザやスマートフォン用サイトでスタイリッシュな切り替えを行うときにいかがでしょうか。

ScrollMagic

ScrollMagic

スクロールに合わせて様々なクオリティの高いエフェクトを付けられるプラグイン。
ワイプや背景色変更、パララックスなど切り替え時に使えるものも用意されています。
Magicという名前に合ったシルクハットとステッキが可愛らしいですね。

Inspiration for Article Intro Effects

Inspiration for Article Intro Effects

ヘッダー部分から本文へ移動する際の動きを想定して作られたエフェクトがまとめられています。全部で7パターン用意されており、どのデモもクオリティが高く今すぐに使ってみたくなります!

リッチな読み物コンテンツを制作する際には是非使ってみたいエフェクトの1つです。

まとめ

いかがでしたでしょうか。
CSS3を使用したエフェクトが多く、モダンブラウザ以外への対応が必要になってしまいますが、新しい技術を取り入れ、気持ちのいい動きをするサイト作りを心がけたいですね。

この記事を書いた人

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