すこし前まで文字テキストをデザインするには、Photoshop や Illustratorといったデザインツールを利用していましたが、CSS3の進化によってこれまでは実現がむずかしかったデザインも、コードのみで作成、スタイリングできるようになってきています。
今回は、コピペで利用できるテキストエフェクト用HTMLコードスニペットをまとめてご紹介します。CSS3など新しいテクニックで実現する手軽なテクニックから、ユーザーの注目を集める面白エフェクトまでが揃います。今後のデザインプロジェクトに活用してみてはいかがでしょう。
詳細は以下から。
CSS3の新体験！コピペできるテキストエフェクト用HTMLスニペットまとめ
@Keyframes アニメーションを利用することで、ふわりと浮かび上がる様子を描いたテクニック。
See the Pen do amazing things by Zhenya Nemerovchenko (@JenyaNem) on CodePen.
白いカンバスからふわりと魅せるテキストエフェクトで、こちらも@keyframes を利用しています。
See the Pen akYXjr by Rian Ariona (@ariona) on CodePen.
A Configurable Bouncing Google Logo
Google ロゴをポヨンと跳ねるローディング・アニメーションエフェクト。
See the Pen A configurable bouncing Google logo by Twixes (@Twixes) on CodePen.
マウスカーソルの動きに合わえて、文字テキストの影を移動できるプラグイン。
See the Pen Shadow Parallax • Reactjs by Siamak Mokhtari (@siamak) on CodePen.
文字テキストに合わせて背景イメージを無限ループさせる、デザインのアクセントにぴったりなテクニック。
See the Pen Font Specimen by Ritchie Altamirano (@RitchieA) on CodePen.
Transmission: Glowing Text Animation
ぼんやりと文字テキストが浮かび上がるテクニックで。
See the Pen Transmission: Glowing Text Animation by Stephen Scaff (@StephenScaff) on CodePen.
See the Pen Random Text React Component by Myles (@MityaDSCH) on CodePen.
マウスホバーで階段上に移動するユニークなCSSエフェクト。
See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.
Reloadボタンを押すと、画面下からふわりと文字テキストが出現するテクニック。
See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.
ポヨンと跳ねるようなエフェクトを文字テキストに加えたテクニック。
See the Pen Bouncy type animation by J Scott Smith (@jscottsmith) on CodePen.
グラフィティアートのような鮮やかなスプレー・アニメーションエフェクト。
See the Pen Glowing text by Bennett Feely (@bennettfeely) on CodePen.
暗闇にネオンライトが光る様子を表現するCSSテクニック。
See the Pen Neon Flux by Thomas Trinca (@Trinca) on CodePen.
新しいCSSプロパティmix-blend-mode: screenを利用したテクニック。
See the Pen Letter mix blend mode by Tobias Reich (@electerious) on CodePen.
CSSのみでスタイリングされた、5種類のテキストエフェクト。
See the Pen 5 CSS Text Effects by Stephy (@blindingstars) on CodePen.
ランダムに文字がスクランブルし、パタパタと切り替わるエフェクト。
See the Pen Text Scramble Effect by Justin Windle (@soulwire) on CodePen.
CSSスタイリングのみで文字テキストを滑らかに切り替えるテクニック。
See the Pen pbwwjA by frank (@spacedino) on CodePen.
Typing Animation with Pseudo-Elements
擬似要素にスタイリングを加えて、文字の切り替えを実現しているテクニック。
See the Pen Typing Animation with Pseudo-Elements by Bram de Haan (@atelierbram) on CodePen.
See the Pen Blur & Transform Text by Eric Grucza (@egrucza) on CodePen.
TweenMax.jsの豊かなアニメーション力を表現した、楽しげなロゴデザイン。
See the Pen Auto-mation animation by Greg Hovanesyan (@gregh) on CodePen.
See the Pen Brand Logo Animation by Mauricio Allende (@mallendeo) on CodePen.
光沢感のある黄金メタリックの文字テキストエフェクト。
See the Pen Bottom view by Janos (@nokiss) on CodePen.
SVGパスに滑らかなアニメーションを追加するテクニックが紹介されています。
See the Pen SVG Stroke Animation by Toshiyuki TAKAHASHI (@gau) on CodePen.
See the Pen SVG Masking Path Animation by Steven Sinatra (@diagramatics) on CodePen.
ロゴデザインにアニメーションを加えることで、サイトのアクセントになりそうなテクニック。
See the Pen SVG stroked logo anim v7913 by W20 (@w20) on CodePen.
 
See the Pen pyxbaz by Geoff Whatley (@meatwallace) on CodePen.
文字テキストにGIFイメージ写真を重ねる新しいテクニック。
See the Pen Gif Text Mask by DJ (@novacanye) on CodePen.
まるで人がタイピングしている様子を表現できるエフェクトで、スピードの強弱にも対応できます。
See the Pen Typing effect with JS by Ronnie Chong (@ronniechong) on CodePen.
入力したアルファベットに反応して、ピクセルドットが形を変えるアニメーション。
See the Pen [WIP] Landing Animation for BBAE by Dolphin Wood (@idiotWu) on CodePen.
See the Pen Text to particles by Louis Hoebregts (@Mamboleoo) on CodePen.
マウスの動きに合わせてダイナミックな影を文字テキストに加えます。
See the Pen 3D CSS dynamic shadow by Marc López (@Loopez10) on CodePen.
