Advertisement

text-effect-html-snippet-2020-1

 

この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。

 

実際のコードを見ながらサンプルを確認、編集を行うことができるので、世界基準の新テクニックを効率的にウェブ制作に採用することができます。

 

 

HTML/CSSで表現できる、すごいテキストエフェクト用スニペットまとめ

 

Fluid text hover

マウスの動きに合わせて背景の画像がぐにゃりと液体のように変化するテキストエフェクト。

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.

 

 

 

Only CSS: Fall In Love

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.

 

 

 

Annoying CRT retro flicker

古いディスプレイモニタがチカチカとなっている様子を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.

 

 

 

Rotating Text

ヘッダーなどに利用できるテクニックで、回転しながら文字テキストが切り替わります。

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.

 

 

 

DConstruct

新しくアップデートされたGSAP3をつかった、ネオンライトが魅力的なインタラクティブなスニペット。

See the Pen
DConstruct
by Cassie Evans (@cassie-codes)
on CodePen.

 

 

 

GSAP 3 ETC Variable Font Wave

Variableフォントを利用した波ウェーブのようなアニメーションエフェクト。

See the Pen
GSAP 3 ETC Variable Font Wave
by Pete Barr (@petebarr)
on CodePen.

 

 

 

OK

アルファベットに動きを加えた、ブランディングにも役立つローディングアニメーション。

See the Pen
OK
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

Directionally blooming words

ページのスクロールに応じてフォントを塗りつぶすようなアニメーションエフェクトが素敵。

See the Pen
Directionally blooming words
by Jhey (@jh3y)
on CodePen.

 

 

 

Animated Verbs

ディズニーのアニメーション基本原則を活用した@keyframe設定により、よりナチュラルな動きに。

See the Pen
Animated Verbs
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

PhotoshopVIP編集部: 2015年3月30日に公開された記事を再度編集、追加しています。 フロントエンド・デザイナーやデベロッパーは

 

 

Animated Verbs II

まるで単語が叫んでいるようなズームエフェクトはCSSでスタイリングされています。

See the Pen
Animated Verbs II
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

 

 

Animated Verbs III

アルファベットがモジモジと隠れて出てこないというユニークなエフェクト。

See the Pen
Animated Verbs III
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

 

 

Variable font animation

フォントの太さを変更することで、まるで呼吸しているような動きをCSSで表現しています。

See the Pen
Variable font animation
by Michelle Barker (@michellebarker)
on CodePen.

 

 

 

wAve

SVGでさくせいされたロゴにCSSアニメーションを加えることで、ユラユラと漂っているような雰囲気を演出します。

See the Pen
wAve
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

CSS Neon Sign

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.

 

 

 

Cassie!

アニメーションライブラリ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.

 

 

 

Showcase text w/ SplittingJS

Splitting.JSを活用して、アルファベットを1文字ずつレインボーカラーで光らせるアニメーション。

See the Pen
Showcase text w/ SplittingJS
by Jhey (@jh3y)
on CodePen.

 

 

 

Pseudo 3D text

入力した単語をホログラムのように立体的に表示するジェネレーター。

See the Pen
Pseudo 3D text
by JK (@funxer)
on CodePen.

 

 

 

background-clip — week 12/52

背景イメージ画像を文字テキストでマスクするお手軽クリッピングテクニック。

See the Pen
background-clip — week 12/52
by Mert Cukuren (@knyttneve)
on CodePen.

 

 

 

Hover Effect for Headers

ヘッダーでの利用を想定したテキストエフェクト用アニメーションライブラリ。

See the Pen
Hover Effect for Headers
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

Loader turbulence

文字テキストのパスを描きながら、乱気流に巻き込まれたようなアニメーションを実現。

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.

 

 

 

Turbulence font – SVG

マウスカーソルの動きに合わせて文字テキストが流動的に乱れるユニークなエフェクト。

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.

 

 

 

Impossibly Tipsy

だまし絵のような目の錯覚を利用したテキストエフェクト。

See the Pen
Impossibly Tipsy
by James Mellers (@jamesmellers)
on CodePen.

 

 

 

古い映画のタイトルなどに使われていそうな、文字が飛んでくるフライングエフェクト。

See the Pen
FlyIn Movie Title
by Vuild (@vuild)
on CodePen.

 

 

 

Animated wave clipped by text

ユラユラと揺れる水面をモチーフにしたクリックピングマスクのテクニック。

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.

 

 

 

Only CSS: Text Wave

まるで海のような美しさをグラデーションとアニメーションを使って表現したスニペット。

See the Pen
Only CSS: Text Wave
by Yusuke Nakaya (@YusukeNakaya)
on CodePen.

 

 

 

Neon text-shadow effect

さまざまな種類のネオンサイン風エフェクトをあつめたコレクション。

See the Pen
Neon text-shadow effect
by Erik Jung (@erikjung)
on CodePen.

 

 

 

Untitled

見出しタイトルに触れるとポヨンとしたキュートな動きが採用されたヘッダー向けテキストエフェクト。

See the Pen
XxEVoo
by Paul Roger (@Tiopayo)
on CodePen.

 

 

 

Droppy woppy input

メールアドレスを入力しようとすると、ダンボール箱でできたアルファベットがドカドカと降ってくる仕掛け。

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.

 

 

 

HTML Buddies & : Stings

タイプライターで入力したようなフォントに、手描きで赤ペン先生のように修正を加えることができるスタイリングテクニック。

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 の中からクリエイティブな作品をいくつかピックアップしています。

 

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるCodepen。その中でも、2019年のあいだに特に人気の高かったコードを、ランキング形式でまとめた
CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。 今回は、

 

 

これまでのスニペットにも目を通してみよう

最新テクニックや技術を詰め込んだスニペットを定期的にまとめて紹介しているので、今後のウェブデザイン制作の参考にしてみてはいかがでしょう。

 

この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。
この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。
思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しい

 

パーツごとのスニペットを探しているときはこちらもどうぞ。

普段からユーザーが何気なく利用しているホバーエフェクトやマウスクリックを、CSSアニメーションを使ってより魅力的に表現してみませんか。動きに目が奪われるアニメーショ
ウェブサイトを訪れたとき、まずユーザーが目にする「ヘッダー」部分は、魅力的なデザインコンセプトを取り入れることで、オリジナル性の高い表現が可能になります。
CSSで表現できる新作ボタンエフェクトをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニック
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで
開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化に
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイル