Advertisement

texteffects2016august (1)

 

すこし前まで文字テキストをデザインするには、Photoshop や Illustratorといったデザインツールを利用していましたが、CSS3の進化によってこれまでは実現がむずかしかったデザインも、コードのみで作成、スタイリングできるようになってきています。

 

 

今回は、コピペで利用できるテキストエフェクト用HTMLコードスニペットをまとめてご紹介します。CSS3など新しいテクニックで実現する手軽なテクニックから、ユーザーの注目を集める面白エフェクトまでが揃います。今後のデザインプロジェクトに活用してみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

CSS3の新体験!コピペできるテキストエフェクト用HTMLスニペットまとめ

「Run Pen」をクリックと読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、各スタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックし、別ウィンドウを開きましょう。

Do Amazing Thing

@Keyframes アニメーションを利用することで、ふわりと浮かび上がる様子を描いたテクニック。

See the Pen do amazing things by Zhenya Nemerovchenko (@JenyaNem) on CodePen.

 

 

 

White Letter Animation

白いカンバスからふわりと魅せるテキストエフェクトで、こちらも@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.

 

 

 

Shadow parallax React JS

マウスカーソルの動きに合わえて、文字テキストの影を移動できるプラグイン。

See the Pen Shadow Parallax • Reactjs by Siamak Mokhtari (@siamak) on CodePen.

 

 

 

Font Specimen

文字テキストに合わせて背景イメージを無限ループさせる、デザインのアクセントにぴったりなテクニック。

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.

 

 

 

Random Text Random Component

See the Pen Random Text React Component by Myles (@MityaDSCH) on CodePen.

 

 

 

CSS Perspective Text Hover

マウスホバーで階段上に移動するユニークなCSSエフェクト。

See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.

 

 

 

Title Text Animation

Reloadボタンを押すと、画面下からふわりと文字テキストが出現するテクニック。

See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.

 

 

 

Bouncy Type Animation

ポヨンと跳ねるようなエフェクトを文字テキストに加えたテクニック。

See the Pen Bouncy type animation by J Scott Smith (@jscottsmith) on CodePen.

 

 

 

Glowing Text

グラフィティアートのような鮮やかなスプレー・アニメーションエフェクト。

See the Pen Glowing text by Bennett Feely (@bennettfeely) on CodePen.

 

 

 

Neon Flux

暗闇にネオンライトが光る様子を表現するCSSテクニック。

See the Pen Neon Flux by Thomas Trinca (@Trinca) on CodePen.

 

 

 

Letter Mix Blend Mode

新しいCSSプロパティmix-blend-mode: screenを利用したテクニック。

See the Pen Letter mix blend mode by Tobias Reich (@electerious) on CodePen.

 

 

 

5 CSS Text Effects

CSSのみでスタイリングされた、5種類のテキストエフェクト。

See the Pen 5 CSS Text Effects by Stephy (@blindingstars) on CodePen.

 

 

 

Text Scramble Effect

ランダムに文字がスクランブルし、パタパタと切り替わるエフェクト。

See the Pen Text Scramble Effect by Justin Windle (@soulwire) on CodePen.

 

 

 

Text Rotator

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.

 

 

 

Blur & Transform Text

See the Pen Blur & Transform Text by Eric Grucza (@egrucza) on CodePen.

 

 

 

Auto-mation Animation

TweenMax.jsの豊かなアニメーション力を表現した、楽しげなロゴデザイン。

See the Pen Auto-mation animation by Greg Hovanesyan (@gregh) on CodePen.

 

 

 

Brand Logo Animation

See the Pen Brand Logo Animation by Mauricio Allende (@mallendeo) on CodePen.

 

 

 

Bottom View

光沢感のある黄金メタリックの文字テキストエフェクト。

See the Pen Bottom view by Janos (@nokiss) on CodePen.

 

 

 

SVG Stroke Animation

SVGパスに滑らかなアニメーションを追加するテクニックが紹介されています。

See the Pen SVG Stroke Animation by Toshiyuki TAKAHASHI (@gau) on CodePen.

 

 

 

SVG Masking Path Animation

See the Pen SVG Masking Path Animation by Steven Sinatra (@diagramatics) on CodePen.

 

 

 

SVG Stroked Logo Animation

ロゴデザインにアニメーションを加えることで、サイトのアクセントになりそうなテクニック。

See the Pen SVG stroked logo anim v7913 by W20 (@w20) on CodePen.

 

 

&nbsp

Logo Animation

See the Pen pyxbaz by Geoff Whatley (@meatwallace) on CodePen.

 

 

 

GIF Text Mask

文字テキストにGIFイメージ写真を重ねる新しいテクニック。

See the Pen Gif Text Mask by DJ (@novacanye) on CodePen.

 

 

 

Typing Effect with JS

まるで人がタイピングしている様子を表現できるエフェクトで、スピードの強弱にも対応できます。

See the Pen Typing effect with JS by Ronnie Chong (@ronniechong) on CodePen.

 

 

 

Landing Animation for BBAE

入力したアルファベットに反応して、ピクセルドットが形を変えるアニメーション。

See the Pen [WIP] Landing Animation for BBAE by Dolphin Wood (@idiotWu) on CodePen.

 

 

 

Text to Particles

See the Pen Text to particles by Louis Hoebregts (@Mamboleoo) on CodePen.

 

 

 

3D CSS Dynamic Shadow

マウスの動きに合わせてダイナミックな影を文字テキストに加えます。

See the Pen 3D CSS dynamic shadow by Marc López (@Loopez10) on CodePen.