ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。
今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。
コンテンツ目次
- 1. アニメーション・テキストエフェクト
- 2. グリッチ・テキストエフェクト
- 3. ホバー・テキストエフェクト
- 4. 回転型テキストエフェクト
- 5. 影付きテキストエフェクト
- 6. タイピング・テキストエフェクト
3Dテキストエフェクト
CSS Text Stroke | CSS Text Border
入力した文字が立体的に浮かび上がる、ライン線を利用したテキストエフェクト。
See the Pen CSS Text Stroke | CSS Text Border – Infinite effect only with #CSS #html5 by Ignacio Correia (@igcorreia) on CodePen.
3D extrude text effect- CSS only
文字を押し出したようなビンテージスタイルのテキストエフェクト。
See the Pen 3D extrude text effect- CSS only by Pete Leidy (@pleidy) on CodePen.
3D Text Effect – Mouseover
マウスホバーすることで、赤青メガネで見ると立体的な3Dエフェクトに仕上げます。
See the Pen 3d Text effect – mousemove by Dennis Garrn (@dennisgarrn) on CodePen.
Animated wave clipped by text
文字テキストに水を注いだようなユラユラとしたアニメーションエフェクト。
See the Pen Animated wave clipped by text by web-tiki (@web-tiki) on CodePen.
jQuery Break/Animate Warping Text Paragraph Example
フォントの大きさが時間の経過に合わせてそれぞれ変化するエフェクト。イントロ画面などにどうぞ。
See the Pen jquery break/animate warping text paragraph example by James (@Sitefall) on CodePen.
Smokey Text
表示されている文字テキストが煙のように消える、CSSのみで実現したエフェクト。
See the Pen Smoky Text by Bennett Feely (@bennettfeely) on CodePen.
Bubbling Text Effect
見出しタイトルからボコボコと泡が出現する、ユニークで楽しいアニメーションエフェクト。
See the Pen Bubbling Text Effect by html5andblog (@html5andblog) on CodePen.
Animated Text Fill
@keyframeを利用することで、文字テキストの背景のみをアニメーションさせるテクニック。
See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen.
Pure CSS Text Animation
ふわりと浮かび上がるテキストエフェクトで、CSSのみでスタイリングされた手軽なテクニック。
See the Pen Pure CSS Text Animation by Robin Treur (@RobinTreur) on CodePen.
Text Color Draw
文字の端がカラフルに変化しながら表示されるテキストエフェクト。
See the Pen text color draw by CJ Gammon (@cjgammon) on CodePen.
Animating SVG Text
文字テキストのSVGアウトラインをアニメーションさせながら表示させる人気スタイルのひとつ。
See the Pen Animating SVG text by Fabio Ottaviani (@supah) on CodePen.
Shaded Text
マウスホバーすることでアウトラインが変化する、SVGとCSSでスタイリングされたテクニック。
See the Pen Shaded Text by Rafael González (@rgg) on CodePen.
Text Animation: Montserrat
CSSのStrokeプロパティを調整することで、滑らかに動くアニメーションテキストを表現します。
See the Pen Text Animation: Montserrat by Claire Larsen (@ClaireLarsen) on CodePen.
Animated Text Fill with SVG Text
See the Pen Animated text fill with svg text by Cesar C. (@cesar2535) on CodePen.
Squiggly Text
See the Pen Squiggly Text by Lucas Bebber (@lbebber) on CodePen.
Shattering Text Animation
文字テキストがバラバラの破片のように飛び散るアニメーションエフェクト。
See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.
Wave Text Effect (with SVG Blend Mode)
レイヤー状に重なった背景が、波のようにユラユラとアニメーションするHTML/CSSスニペット。
See the Pen Wave text effect (with SVG/blend mode) by Lucas Bebber (@lbebber) on CodePen.
GSAP Text Animation
See the Pen GSAP Text Animation by Nate Wiley (@natewiley) on CodePen.
Colorful Text Animation
文字テキストが美しいグラデーションで変化を続けるアニメーションエフェクト。
See the Pen #webdev series – Colorful text animation #updated by Hendry Sadrak (@hendrysadrak) on CodePen.
Animated Text with Snap SVG
塗り絵のように文字テキストをカラフルにペイントします。
See the Pen Animated text with Snapsvg by yoksel (@yoksel) on CodePen.
SVG Path Animated Text
SVGパスアニメーションを利用したテキストエフェクトは、ロゴなど目立たせたい部分に。
See the Pen SVG Path animated Text by Tamino Martinius (@Zaku) on CodePen.
Animated Text-Shadow Pattern
See the Pen [webkit] Animated “text-shadow” pattern by carpe numidium (@carpenumidium) on CodePen.
Line Text.
点と点を線で結んで出来あがった、幾何学模様のアニメーションエフェクト。
See the Pen Line text. by Johan Fagerbeg (@birjolaxew) on CodePen.
The Wave
SVGを活用することで、文字テキストがユラユラと波打っている様子を表現できます。
See the Pen The Wave by Chris Coyier (@chriscoyier) on CodePen.
Opening Sequence
文字テキストがふわりと表示され、映画のオープニングテーマのような雰囲気を演出できます。
See the Pen Opening Sequence by Sebastian Schepis (@sschepis) on CodePen.
SVG Stroke Reveal Animation
See the Pen SVG Stroke Reveal Animation by Catalin Mortan (@dererstekaktus) on CodePen.
CSS Animated Neon Sign
ネオンライトのようにチカチカとしながら光るテキストエフェクト。
See the Pen CSS animated Neon Sign by Nodws (@nodws) on CodePen.
CSS Particle Effects
文字テキストからハートや星型などキラキラさせて表示させるアニメーションエフェクト。
See the Pen CSS Particle Effects by Atticus Koya (@OfficialAntarctica) on CodePen.
SVG Masking Path Animation
手書き風筆記体フォントをアニメーション合わせて表示するテクニック。
See the Pen SVG Masking Path Animation by Steven Sinatra (@diagramatics) on CodePen.
グリッチエフェクト
CSS3 Glitch Animation
文字サイズに合わせて3種類のグリッチエフェクト用スタリングが収録されています。
See the Pen CSS3 Glitch Animation by Petr Tichy (@ihatetomatoes) on CodePen.
VHS Text
古いブラウン管のテレビで映し出したようなグリッチエフェクトを再現します。
See the Pen VHS text by Maria (@Shorina) on CodePen.
Glitched Text
See the Pen Glitched Text (study of The Verge) by Derek Palladino (@derekjp) on CodePen.
Glitch Text
HTMLとCSSのみでスタイリングされたグリッチエフェクトで実装もお手軽。
See the Pen Glitch Text by zoite (@zoite) on CodePen.
Glitchy Text
See the Pen Glitchy Text by Matt Stvartak (@mattstvartak) on CodePen.
CSS-Only Glitch Effect
こちらもCSSのみでスタイリングできるグリッチエフェクト。
See the Pen CSS-Only Glitch Effect by Justin (@nilbog) on CodePen.
CSS Glitched Text
See the Pen css glitched text by skew by naiting (@sliiice) on CodePen.
ホバー・テキストエフェクト
CSS Perspective Text Hover
マウスホバーすることで階段状に展開するテキストエフェクト。
See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.
3D Hover Text Effect
See the Pen 3d hover text effect by Sascha Sigl (@SaschaSigl) on CodePen.
Animated Highlighted Text
マウスホバーでも次テキスト全体をハイライトできるスタイリングテクニック。
See the Pen Animated highlighted text by Rian Ariona (@ariona) on CodePen.
Happy Text
カラフルな文字テキストがウェーブするユニークなアニメーション。
See the Pen Happy Text by Bennett Feely (@bennettfeely) on CodePen.
Peeled Text Transforms
文字テキストが立体的にめくれたようなスタイルを実現するエフェクト。
See the Pen Peeled Text Transforms by Michiel Bijl (@Michiel) on CodePen.
Text-Mask Background Moving on MouseMove
マウスカーソルの動きに合わせて背景イメージが動くテキストエフェクト。
See the Pen Text-mask background moving on MouseMove – v2 by Robert Borghesi (@dghez) on CodePen.
Efek Typography Text Neon Part 1
文字テキストにマウスカーソルを合わせると、ネオンライトのようにぼんやりと暗闇に光るエフェクト。
See the Pen Efek Typography Text Neon part 1 by Prima Utama Apriansyah (@primaapriansyah) on CodePen.
回転型テキストエフェクト
3D Quote Rotator
くるくると回転しながら文字テキストが集まって表示されるエフェクト。
See the Pen #Codevember 3D Quote Rotator by Nate Wiley (@natewiley) on CodePen.
Rotating Text
入力した文字テキストの一部がくるくると変化するアニメーションエフェクト。
See the Pen Rotating text by Rachel Smith (@rachsmith) on CodePen.
Vertically Rotating Text CSS with Broswer Prefixes
各種モダンブラウザでの動きにも対応した、実践的な回転型テキストエフェクト。
See the Pen Vertically rotating text css w/ browser prefixes by Jacob (@JacobStone420) on CodePen.
SVG Motion
文字テキストをルーレット上にクルクルさせながら表示するテクニック。
See the Pen #codevember 01 – svg motion by coderitual (@coderitual) on CodePen.
シャドウ付きテキストエフェクト
Styling Text with SVG
まるで紙幣のような影付きテキストエフェクトを実現するテクニック。
See the Pen Styling Text with SVG (Second Shadow) by Code School (@codeschool) on CodePen.
Pretty Shadow
text-shadowプロパティを利用するだけで実装可能なテキストエフェクト。
See the Pen Pretty shadow by Alex Moore (@MoorLex) on CodePen.
Variable Longshadow with Gradients Mixin
フラットスタイルから派生したロングシャドウ・エフェクトをCSSで実現するテクニック。
See the Pen Variable Longshadow with Gradients Mixin by Dario Corsi (@dariocorsi) on CodePen.
Awesome Text-Shadow
まるで本物そっくりなほどリアルなドロップシャドウエフェクトをCSSで再現します。
See the Pen Awesome Text-Shadow by Nguyen Hoang Nam (@namho) on CodePen.
Do Amazing Things
See the Pen do amazing things by Zhenya Nemerovchenko (@JenyaNem) on CodePen.
Text Shadow
古いビンテージ風文字エフェクトを表現した、影付きテキスト用スタイリング。
See the Pen Text-Shadow by Mayur Elbhar (@mayurelbhar) on CodePen.
CSS Text Shadow
文字同士が立体的に重なり合ったように見せる、ドロップシャドウをうまく利用したテキストエフェクト。
See the Pen CSS Text Shadow by Chris Eisenbraun (@chriseisenbraun) on CodePen.
Long Shadow Gradient Mixin
Mixinを利用することで、リアルな質感のドロップシャドウを手軽に表現できるテクニック。
See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.
CSS Text Shadow Effects
エレガントなドロップシャドウから型押しレタープレスエフェクトまでCSSのみで実現したスタリング。
See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.
CSS Dashed Shadow
See the Pen CSS Dashed Shadow by Lucas Bebber (@lbebber) on CodePen.
タイピング・テキストエフェクト
Auto Typing Text (function)
パソコンで入力したような文字テキストのタイピングエフェクト、ファイルサイズも小さくより手軽に利用できます。
See the Pen Auto Typing Text (function) by Connor Gaunt (@ConnorGaunt) on CodePen.
Love Text Effect
See the Pen LOVE Text Effect by Matthew Wagerfield (@wagerfield) on CodePen.
Kinetic Type with Greensock
表示されている単語が、入力した文字テキストへとアニメーション付きで変化していきます。
See the Pen Kinetic Type with Greensock by Nerdmanship (@nerdmanship) on CodePen.
Scramble Text Effect
文字テキストをスクランブル状態で表示できるエフェクト。
See the Pen Text Scramble Effect by Justin Windle (@soulwire) on CodePen.
Transmission: Glowing Text Animation
ぼんやりと白く光りながら表示されるテキストアニメーション。
See the Pen Transmission: Glowing Text Animation by Stephen Scaff (@StephenScaff) on CodePen.
Futuristic Resolving/Typing Text Effect feat. GLaDOS
空港の連絡掲示板のようなパタパタと文字が切り替わるアニメーションエフェクト。
See the Pen Futuristic Resolving/Typing Text Effect feat. GLaDOS by Kevin (@qkevinto) on CodePen.
Text Typing Thingamy
See the Pen Text typing thingamy by Jack Armley (@jackarmley) on CodePen.
SVG Text: Animated Typing
SVGテキストを利用することで、柔軟なアニメーションエフェクトに対応できるタイピング効果。
See the Pen SVG Text: Animated Typing by Tiffany Rayside (@tmrDevelops) on CodePen.
Typing Text with Javascript
わずかなコードを加えるだけで、実際にタイピングしているようなアニメーションエフェクトを実現できます。
See the Pen Typing Text with Javascript by Max (@MyXoToD) on CodePen.