【CSS】HTMLとCSSのみで出来る特殊エフェクト一覧
この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。
実際のコードを見ながらサンプルを確認、編集を行うことができるので、世界基準の新テクニックを効率的にウェブ制作に採用することができます。
HTML/CSSで表現できる、すごいテキストエフェクト用スニペットまとめ
マウスの動きに合わせて背景の画像がぐにゃりと液体のように変化するテキストエフェクト。
SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers
ページをスクロールするとSVGパスに沿ってテキストがアニメーションするテクニック。
CSSのみでスタイリングされたとは思えないほど、なめらかで立体的な動きが特長のスニペット。
Glitchy text w/ Splitting.js ⚡️
CSSで表現できるグリッチエフェクトを複数まとめたライブラリ的スニペット。
古いディスプレイモニタがチカチカとなっている様子をCSSで表現しています。
Zebra Page- web animation from a Procreate drawing
Procreateアプリで描いた手描きスケッチにアニメーションを加えたスタイリング。
ヘッダーなどに利用できるテクニックで、回転しながら文字テキストが切り替わります。
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フォントを利用したアニメーションエフェクトで、自由自在にフォントの太さを調整できる新しいテクニック。
新しくアップデートされたGSAP3をつかった、ネオンライトが魅力的なインタラクティブなスニペット。
Variableフォントを利用した波ウェーブのようなアニメーションエフェクト。
アルファベットに動きを加えた、ブランディングにも役立つローディングアニメーション。
ページのスクロールに応じてフォントを塗りつぶすようなアニメーションエフェクトが素敵。
今回紹介したスニペットは、Codepenから集めたコレクションとなります。
是非活用してみてください。