MENU

NEWS
ニュース

【CSS】HTMLとCSSのみで出来る特殊エフェクト一覧

この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。

実際のコードを見ながらサンプルを確認、編集を行うことができるので、世界基準の新テクニックを効率的にウェブ制作に採用することができます。

HTML/CSSで表現できる、すごいテキストエフェクト用スニペットまとめ

 

Fluid text hover

マウスの動きに合わせて背景の画像がぐにゃりと液体のように変化するテキストエフェクト。

 

 

 

 

SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers

ページをスクロールするとSVGパスに沿ってテキストがアニメーションするテクニック。

 

 

 

 

Only CSS: Fall In Love

CSSのみでスタイリングされたとは思えないほど、なめらかで立体的な動きが特長のスニペット。

 

 

 

Glitchy text w/ Splitting.js ⚡️

CSSで表現できるグリッチエフェクトを複数まとめたライブラリ的スニペット。

 

 

 

Annoying CRT retro flicker

古いディスプレイモニタがチカチカとなっている様子をCSSで表現しています。

 

 

 

Zebra Page- web animation from a Procreate drawing

Procreateアプリで描いた手描きスケッチにアニメーションを加えたスタイリング。

 

 

 

Rotating Text

ヘッダーなどに利用できるテクニックで、回転しながら文字テキストが切り替わります。

 

 

 

CSS Only Random Text Transform (Animated)

くるくると回転しながら任意の文字テキストを表示できるCSSアニメーションテクニック。

 

 

 

Black_mirror crack text effect

海外ドラマシリーズのオープニングエフェクトをCSSで実現したスニペット。

 

 

 

CSS only Variable font demo using Decovar Regular

バリアブルフォントとCSSで表現できる可能性を感じるスニペット。

 

 

 

Variable Font Fun (CSS Animation Version)

こちらもVariableフォントを利用したアニメーションエフェクトで、自由自在にフォントの太さを調整できる新しいテクニック。

 

 

 

DConstruct

新しくアップデートされたGSAP3をつかった、ネオンライトが魅力的なインタラクティブなスニペット。

 

 

 

GSAP 3 ETC Variable Font Wave

Variableフォントを利用した波ウェーブのようなアニメーションエフェクト。

 

 

 

OK

アルファベットに動きを加えた、ブランディングにも役立つローディングアニメーション。

 

 

 

Directionally blooming words

ページのスクロールに応じてフォントを塗りつぶすようなアニメーションエフェクトが素敵。

今回紹介したスニペットは、Codepenから集めたコレクションとなります。

是非活用してみてください。

PAGETOP