意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。
PR
Sponsored Link
セグメンテッド コントロール
pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。
もうひとつはcodepenから。
See the Pen DropDown2Segment by ActiveCodex (@ActiveCodex) on CodePen.
モーフィング
クリックした箇所に、トリミングやポリゴンなどの視覚的な変化をかけていく効果。このエフェクトを使っているランディングページは少ないので機会があれば使いたい。
ブレンドモード
Colofilter.cssを配置したら、任意の要素にクラス名を追加すれば簡単にフィルタをかけることができます。
ネオン グロー
マウスオーバーしている間、発光しているかのようなエフェクトを付与します。
See the Pen [CSS3] Neon Glow by NobodyRocks (@NobodyRocks) on CodePen.
チルト
マウスを感知して画像に傾きを与える効果。
グリッチ
マウスオーバーしている間、ノイズのようなグリッチ画効果をkeyframesによってテキストに付与します。
See the Pen Glitch text with image background by Marcel Legane (@marcellegane) on CodePen.
パーティクル
ブラウザ上でパーティクル（粒子や煙・葉など自然に存在する不規則な形）などの3Dを簡単に表現可能にするWebGLを使い、以下のサイトではプラズマが発生しているかのようなエフェクトを表現しています。
リップル
クリックした箇所を起点に広がる波紋のようなエフェクト。
トランスルーセント
完全に透明ではない、曇りガラスのようなトランスルーセント（translucent）効果を使ったボタン。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
[…] 3. Webサイト制作：意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ […]