この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。
実際のコードを見ながらサンプルを確認、編集を行うことができるので、世界基準の新テクニックを効率的にウェブ制作に採用することができます。
HTML/CSSで表現できる、すごいテキストエフェクト用スニペットまとめ
マウスの動きに合わせて背景の画像がぐにゃりと液体のように変化するテキストエフェクト。
See the Pen
Fluid text hover by Robin Delaporte (@robin-dela)
on CodePen.
SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers
ページをスクロールするとSVGパスに沿ってテキストがアニメーションするテクニック。
See the Pen
SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers by @keyframers (@keyframers)
on CodePen.
CSSのみでスタイリングされたとは思えないほど、なめらかで立体的な動きが特長のスニペット。
See the Pen
Only CSS: Fall In Love by Yusuke Nakaya (@YusukeNakaya)
on CodePen.
Glitchy text w/ Splitting.js ⚡️
CSSで表現できるグリッチエフェクトを複数まとめたライブラリ的スニペット。
See the Pen
Glitchy text w/ Splitting.js ⚡️ by Jhey (@jh3y)
on CodePen.
古いディスプレイモニタがチカチカとなっている様子をCSSで表現しています。
See the Pen
Annoying CRT retro flicker by Patrick H. Lauke (@patrickhlauke)
on CodePen.
Zebra Page- web animation from a Procreate drawing
Procreateアプリで描いた手描きスケッチにアニメーションを加えたスタイリング。
See the Pen
Zebra Page- web animation from a Procreate drawing by Sarah Drasner (@sdras)
on CodePen.
ヘッダーなどに利用できるテクニックで、回転しながら文字テキストが切り替わります。
See the Pen
Rotating Text by alphardex (@alphardex)
on CodePen.
CSS Only Random Text Transform (Animated)
くるくると回転しながら任意の文字テキストを表示できるCSSアニメーションテクニック。
See the Pen
CSS Only Random Text Transform (Animated) by lefoy (@lefoy)
on CodePen.
Black_mirror crack text effect
海外ドラマシリーズのオープニングエフェクトをCSSで実現したスニペット。
See the Pen
Black_mirror crack text effect by gabecrockett (@gabecrockett)
on CodePen.
CSS only Variable font demo using Decovar Regular
バリアブルフォントとCSSで表現できる可能性を感じるスニペット。
See the Pen
CSS only Variable font demo using Decovar Regular by Mandy Michael (@mandymichael)
on CodePen.
Variable Font Fun (CSS Animation Version)
こちらもVariableフォントを利用したアニメーションエフェクトで、自由自在にフォントの太さを調整できる新しいテクニック。
See the Pen
Variable Font Fun (CSS Animation Version) by Tyler Durrett (@electricgarden)
on CodePen.
新しくアップデートされたGSAP3をつかった、ネオンライトが魅力的なインタラクティブなスニペット。
See the Pen
DConstruct by Cassie Evans (@cassie-codes)
on CodePen.
Variableフォントを利用した波ウェーブのようなアニメーションエフェクト。
See the Pen
GSAP 3 ETC Variable Font Wave by Pete Barr (@petebarr)
on CodePen.
アルファベットに動きを加えた、ブランディングにも役立つローディングアニメーション。
See the Pen
OK by Adam Kuhn (@cobra_winfrey)
on CodePen.
ページのスクロールに応じてフォントを塗りつぶすようなアニメーションエフェクトが素敵。
See the Pen
Directionally blooming words by Jhey (@jh3y)
on CodePen.
ディズニーのアニメーション基本原則を活用した@keyframe設定により、よりナチュラルな動きに。
See the Pen
Animated Verbs by Ryan Mulligan (@hexagoncircle)
on CodePen.
まるで単語が叫んでいるようなズームエフェクトはCSSでスタイリングされています。
See the Pen
Animated Verbs II by Ryan Mulligan (@hexagoncircle)
on CodePen.
アルファベットがモジモジと隠れて出てこないというユニークなエフェクト。
See the Pen
Animated Verbs III by Ryan Mulligan (@hexagoncircle)
on CodePen.
フォントの太さを変更することで、まるで呼吸しているような動きをCSSで表現しています。
See the Pen
Variable font animation by Michelle Barker (@michellebarker)
on CodePen.
SVGでさくせいされたロゴにCSSアニメーションを加えることで、ユラユラと漂っているような雰囲気を演出します。
See the Pen
wAve by Adam Kuhn (@cobra_winfrey)
on CodePen.
CSSのみでデザインされたネオンサインエフェクト。暗闇にぼんやりと輝く様子を表現できます。
See the Pen
CSS Neon Sign by Ananya Neogi (@ananyaneogi)
on CodePen.
80s Fonts Text Effect 1: 80s Chrome Text
こちらもCSSのみでスタイリングされた、80年代風のメタルテキストエフェクト。
See the Pen
80s Fonts Text Effect 1: 80s Chrome Text by Ion Emil Negoita (@inegoita)
on CodePen.
アニメーションライブラリTweenMaxを利用したSVGテキストエフェクト。
See the Pen
Cassie! by Cassie Evans (@cassie-codes)
on CodePen.
Matrix digital rain (animated version)
名作マトリックスのオープニングを意識した、文字が雨のように降り注ぐデジタルエフェクト。
See the Pen
Matrix digital rain (animated version) by yuanchuan (@yuanchuan)
on CodePen.
Splitting.JSを活用して、アルファベットを１文字ずつレインボーカラーで光らせるアニメーション。
See the Pen
Showcase text w/ SplittingJS by Jhey (@jh3y)
on CodePen.
入力した単語をホログラムのように立体的に表示するジェネレーター。
See the Pen
Pseudo 3D text by JK (@funxer)
on CodePen.
背景イメージ画像を文字テキストでマスクするお手軽クリッピングテクニック。
See the Pen
background-clip — week 12/52 by Mert Cukuren (@knyttneve)
on CodePen.
ヘッダーでの利用を想定したテキストエフェクト用アニメーションライブラリ。
See the Pen
Hover Effect for Headers by Olivia Ng (@oliviale)
on CodePen.
文字テキストのパスを描きながら、乱気流に巻き込まれたようなアニメーションを実現。
See the Pen
Loader turbulence by Damien Montastier (@damienmontastier)
on CodePen.
Animated blob SVG text clipping effect – Pt. 2
文字テキストに合わせて背景をクリッピングマスクし、そこにアニメーションを追加した実験的スニペット。
See the Pen
Animated blob SVG text clipping effect – Pt. 2 by Zach Saucier (@ZachSaucier)
on CodePen.
マウスカーソルの動きに合わせて文字テキストが流動的に乱れるユニークなエフェクト。
See the Pen
Turbulence font – SVG by Damien Montastier (@damienmontastier)
on CodePen.
Many Icons in 3D using Three.js
無数のアイコンによって文字が形成される様子をアニメーション付きで。
See the Pen
Many Icons in 3D using Three.js by Yasunobu Ikeda a.k.a @clockmaker (@clockmaker)
on CodePen.
Volume Controlled Variable Fonts!!!!
マイクに取り込んだ音量の大小によって、文字テキストが変化するインタラクティブな仕掛け。
See the Pen
Volume Controlled Variable Fonts!!!! by Pete Barr (@petebarr)
on CodePen.
だまし絵のような目の錯覚を利用したテキストエフェクト。
See the Pen
Impossibly Tipsy by James Mellers (@jamesmellers)
on CodePen.
古い映画のタイトルなどに使われていそうな、文字が飛んでくるフライングエフェクト。
See the Pen
FlyIn Movie Title by Vuild (@vuild)
on CodePen.
ユラユラと揺れる水面をモチーフにしたクリックピングマスクのテクニック。
See the Pen
Animated wave clipped by text by web-tiki (@web-tiki)
on CodePen.
Layered fonts in css using Rig Shaded by Jamie Clarke
CSSでデザインされたレトロテキストエフェクトで、単語をクリックすると編集も可能です。
See the Pen
Layered fonts in css using Rig Shaded by Jamie Clarke by Mandy Michael (@mandymichael)
on CodePen.
まるで海のような美しさをグラデーションとアニメーションを使って表現したスニペット。
See the Pen
Only CSS: Text Wave by Yusuke Nakaya (@YusukeNakaya)
on CodePen.
さまざまな種類のネオンサイン風エフェクトをあつめたコレクション。
See the Pen
Neon text-shadow effect by Erik Jung (@erikjung)
on CodePen.
見出しタイトルに触れるとポヨンとしたキュートな動きが採用されたヘッダー向けテキストエフェクト。
See the Pen
XxEVoo by Paul Roger (@Tiopayo)
on CodePen.
メールアドレスを入力しようとすると、ダンボール箱でできたアルファベットがドカドカと降ってくる仕掛け。
See the Pen
Droppy woppy input by Steve Gardner (@ste-vg)
on CodePen.
Cascading text effects w/ Splitting + ScrollOut ✍️
アルファベットに合わせてさまざまな動きを加えたエフェクト集。ページを下にスクロールすることでアニメションが開始します。
See the Pen
Cascading text effects w/ Splitting + ScrollOut ✍️ by Jhey (@jh3y)
on CodePen.
ボックスが伸縮しながら表示されたあとに、文字テキストが出現するアニメーションテクニック。
See the Pen
Block effect text intro by Zed Dash (@z-)
on CodePen.
タイプライターで入力したようなフォントに、手描きで赤ペン先生のように修正を加えることができるスタイリングテクニック。
See the Pen
HTML Buddies <del> & <ins>: Stings by Jessica Paoli (@skullface)
on CodePen.
2019年に話題となったHTML/CSSスニペット ベスト100
今回紹介したスニペットは、Codepenから集めたコレクションとなります。以下の記事では、2019年のあいだに特に人気の高かったコードを、ランキング形式でまとめた The Most Hearted of 2019 の中からクリエイティブな作品をいくつかピックアップしています。
これまでのスニペットにも目を通してみよう
最新テクニックや技術を詰め込んだスニペットを定期的にまとめて紹介しているので、今後のウェブデザイン制作の参考にしてみてはいかがでしょう。
パーツごとのスニペットを探しているときはこちらもどうぞ。
