意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ

• 作成：2016/02/8
• 更新：2016/06/29
• Web制作

CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。

セグメンテッド コントロール

pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。

• Blueprint: View Mode Switch

もうひとつはcodepenから。

See the Pen DropDown2Segment by ActiveCodex (@ActiveCodex) on CodePen.

• DropDown2Segment

モーフィング

クリックした箇所に、トリミングやポリゴンなどの視覚的な変化をかけていく効果。このエフェクトを使っているランディングページは少ないので機会があれば使いたい。

• Card Expansion Effect with SVG clipPath | Codrops

ブレンドモード

Colofilter.cssを配置したら、任意の要素にクラス名を追加すれば簡単にフィルタをかけることができます。

• ブレンドモードを利用したカラフルなフィルタの為のCSS・「Colofilter.css」 - かちびと.net
• colofilter.css

ネオン グロー

マウスオーバーしている間、発光しているかのようなエフェクトを付与します。

See the Pen [CSS3] Neon Glow by NobodyRocks (@NobodyRocks) on CodePen.

• [CSS3] Neon Glow

チルト

マウスを感知して画像に傾きを与える効果。

• Image Tilt Effect | Codrops

グリッチ

マウスオーバーしている間、ノイズのようなグリッチ画効果をkeyframesによってテキストに付与します。

See the Pen Glitch text with image background by Marcel Legane (@marcellegane) on CodePen.

• Glitch text with image background

パーティクル

ブラウザ上でパーティクル（粒子や煙・葉など自然に存在する不規則な形）などの3Dを簡単に表現可能にするWebGLを使い、以下のサイトではプラズマが発生しているかのようなエフェクトを表現しています。

• [デモ・ダウンロード] Plasmatic Isosurface
• [WebGL 対応表] Can I use

リップル

クリックした箇所を起点に広がる波紋のようなエフェクト。

• Creating Material Design Ripple Effects with SVG | Codrops

トランスルーセント

完全に透明ではない、曇りガラスのようなトランスルーセント（translucent）効果を使ったボタン。

• Translucent Button (SVG-Filter)

• 1
• 1
• 8

2013/03/4

簡単に今すぐできる！WEB制作を「はじめて」する人が分かるまとめ

もし「全部」自分でやることになっても 一人でサクッと作れるようになりたい 今回はWeb制作や、ツール・ソフトの使い方が「簡単」に分かる、デザインが良い「マニュアル的」な

2013/02/12

助かりすぎて泣いた！簡単で実践的な「アフィリエイト」まとめ

毎月生活が出来るくらいの収益を発生させたい 会社の給料が多くても、少なくても テレビを消して、アフィリエイトをやってみたい。 今回は、経験にもとづいて「確かに

2014/11/10

知っておくと便利！あのサイトでさりげなく使われていたCSS小技集

2014/12/01：続編である「最近のサイトで使われていたCSS小技集」を書きました。 今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高く

2016/11/21

モダンなフォームを作るために覚えておきたいCSSの擬似クラス

モダンなフォームを作るために覚えておきたい擬似クラスをまとめました。 疑似クラスとは 疑似クラスとはその名の通り疑似的なクラスをCSSで作るということで、指定したセ