この記事では、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フォントを利用した波ウェーブのようなアニメーションエフェクト。
アルファベットに動きを加えた、ブランディングにも役立つローディングアニメーション。
ページのスクロールに応じてフォントを塗りつぶすようなアニメーションエフェクトが素敵。
ディズニーのアニメーション基本原則を活用した@keyframe設定により、よりナチュラルな動きに。
まるで単語が叫んでいるようなズームエフェクトはCSSでスタイリングされています。
アルファベットがモジモジと隠れて出てこないというユニークなエフェクト。
フォントの太さを変更することで、まるで呼吸しているような動きをCSSで表現しています。
SVGでさくせいされたロゴにCSSアニメーションを加えることで、ユラユラと漂っているような雰囲気を演出します。
CSSのみでデザインされたネオンサインエフェクト。暗闇にぼんやりと輝く様子を表現できます。
80s Fonts Text Effect 1: 80s Chrome Text
こちらもCSSのみでスタイリングされた、80年代風のメタルテキストエフェクト。
アニメーションライブラリTweenMaxを利用したSVGテキストエフェクト。
Matrix digital rain (animated version)
名作マトリックスのオープニングを意識した、文字が雨のように降り注ぐデジタルエフェクト。
Splitting.JSを活用して、アルファベットを1文字ずつレインボーカラーで光らせるアニメーション。
入力した単語をホログラムのように立体的に表示するジェネレーター。
背景イメージ画像を文字テキストでマスクするお手軽クリッピングテクニック。
ヘッダーでの利用を想定したテキストエフェクト用アニメーションライブラリ。
文字テキストのパスを描きながら、乱気流に巻き込まれたようなアニメーションを実現。
Animated blob SVG text clipping effect – Pt. 2
文字テキストに合わせて背景をクリッピングマスクし、そこにアニメーションを追加した実験的スニペット。
マウスカーソルの動きに合わせて文字テキストが流動的に乱れるユニークなエフェクト。
Many Icons in 3D using Three.js
無数のアイコンによって文字が形成される様子をアニメーション付きで。
Volume Controlled Variable Fonts!!!!
マイクに取り込んだ音量の大小によって、文字テキストが変化するインタラクティブな仕掛け。
だまし絵のような目の錯覚を利用したテキストエフェクト。
古い映画のタイトルなどに使われていそうな、文字が飛んでくるフライングエフェクト。
ユラユラと揺れる水面をモチーフにしたクリックピングマスクのテクニック。
Layered fonts in css using Rig Shaded by Jamie Clarke
CSSでデザインされたレトロテキストエフェクトで、単語をクリックすると編集も可能です。
まるで海のような美しさをグラデーションとアニメーションを使って表現したスニペット。
さまざまな種類のネオンサイン風エフェクトをあつめたコレクション。
見出しタイトルに触れるとポヨンとしたキュートな動きが採用されたヘッダー向けテキストエフェクト。
メールアドレスを入力しようとすると、ダンボール箱でできたアルファベットがドカドカと降ってくる仕掛け。
Cascading text effects w/ Splitting + ScrollOut ✍️
アルファベットに合わせてさまざまな動きを加えたエフェクト集。ページを下にスクロールすることでアニメションが開始します。
ボックスが伸縮しながら表示されたあとに、文字テキストが出現するアニメーションテクニック。
タイプライターで入力したようなフォントに、手描きで赤ペン先生のように修正を加えることができるスタイリングテクニック。
2019年に話題となったHTML/CSSスニペット ベスト100
今回紹介したスニペットは、Codepenから集めたコレクションとなります。以下の記事では、2019年のあいだに特に人気の高かったコードを、ランキング形式でまとめた The Most Hearted of 2019 の中からクリエイティブな作品をいくつかピックアップしています。
これまでのスニペットにも目を通してみよう
最新テクニックや技術を詰め込んだスニペットを定期的にまとめて紹介しているので、今後のウェブデザイン制作の参考にしてみてはいかがでしょう。
パーツごとのスニペットを探しているときはこちらもどうぞ。