webコラム 2021年2月5日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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