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

amazing_effects

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

IT/WEB業界への転職なら

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

segmentedcontrol

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

もうひとつはcodepenから。

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

モーフィング

morphing

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

ブレンドモード

blend

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

ネオン グロー

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

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

チルト

tilt

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

グリッチ

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

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

パーティクル

plasmaeffect

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

リップル

ripple

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

トランスルーセント

translucent

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