Advertisement

text-effect-html-snippet-2020-1

 

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

 

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

 

 

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

 

Fluid text hover

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

 

 

 

SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers

ページをスクロールするとSVGパスに沿ってテキストがアニメーションするテクニック。

 

 

 

Only CSS: Fall In Love

CSSのみでスタイリングされたとは思えないほど、なめらかで立体的な動きが特長のスニペット。

 

 

 

Glitchy text w/ Splitting.js ⚡️

CSSで表現できるグリッチエフェクトを複数まとめたライブラリ的スニペット。

 

 

 

Annoying CRT retro flicker

古いディスプレイモニタがチカチカとなっている様子をCSSで表現しています。

 

 

 

Zebra Page- web animation from a Procreate drawing

Procreateアプリで描いた手描きスケッチにアニメーションを加えたスタイリング。

 

 

 

Rotating Text

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

 

 

 

CSS Only Random Text Transform (Animated)

くるくると回転しながら任意の文字テキストを表示できるCSSアニメーションテクニック。

 

 

 

Black_mirror crack text effect

海外ドラマシリーズのオープニングエフェクトをCSSで実現したスニペット。

 

 

 

CSS only Variable font demo using Decovar Regular

バリアブルフォントとCSSで表現できる可能性を感じるスニペット。

 

 

 

Variable Font Fun (CSS Animation Version)

こちらもVariableフォントを利用したアニメーションエフェクトで、自由自在にフォントの太さを調整できる新しいテクニック。

 

 

 

DConstruct

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

 

 

 

GSAP 3 ETC Variable Font Wave

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

 

 

 

OK

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

 

 

 

Directionally blooming words

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

 

 

 

Animated Verbs

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

 

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

 

 

Animated Verbs II

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

 

 

 

Animated Verbs III

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

 

 

 

Variable font animation

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

 

 

 

wAve

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

 

 

 

CSS Neon Sign

CSSのみでデザインされたネオンサインエフェクト。暗闇にぼんやりと輝く様子を表現できます。

 

 

 

80s Fonts Text Effect 1: 80s Chrome Text

こちらもCSSのみでスタイリングされた、80年代風のメタルテキストエフェクト。

 

 

 

Cassie!

アニメーションライブラリTweenMaxを利用したSVGテキストエフェクト。

 

 

 

Matrix digital rain (animated version)

名作マトリックスのオープニングを意識した、文字が雨のように降り注ぐデジタルエフェクト。

 

 

 

Showcase text w/ SplittingJS

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

 

 

 

Pseudo 3D text

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

 

 

 

background-clip — week 12/52

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

 

 

 

Hover Effect for Headers

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

 

 

 

Loader turbulence

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

 

 

 

Animated blob SVG text clipping effect – Pt. 2

文字テキストに合わせて背景をクリッピングマスクし、そこにアニメーションを追加した実験的スニペット。

 

 

 

Turbulence font – SVG

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

 

 

 

Many Icons in 3D using Three.js

無数のアイコンによって文字が形成される様子をアニメーション付きで。

 

 

 

Volume Controlled Variable Fonts!!!!

マイクに取り込んだ音量の大小によって、文字テキストが変化するインタラクティブな仕掛け。

 

 

 

Impossibly Tipsy

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

 

 

 

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

 

 

 

Animated wave clipped by text

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

 

 

 

Layered fonts in css using Rig Shaded by Jamie Clarke

CSSでデザインされたレトロテキストエフェクトで、単語をクリックすると編集も可能です。

 

 

 

Only CSS: Text Wave

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

 

 

 

Neon text-shadow effect

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

 

 

 

Untitled

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

 

 

 

Droppy woppy input

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

 

 

 

Cascading text effects w/ Splitting + ScrollOut ✍️

アルファベットに合わせてさまざまな動きを加えたエフェクト集。ページを下にスクロールすることでアニメションが開始します。

 

 

 

ボックスが伸縮しながら表示されたあとに、文字テキストが出現するアニメーションテクニック。

 

 

 

HTML Buddies & : Stings

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

 

 

2019年に話題となったHTML/CSSスニペット ベスト100

 

今回紹介したスニペットは、Codepenから集めたコレクションとなります。以下の記事では、2019年のあいだに特に人気の高かったコードを、ランキング形式でまとめた The Most Hearted of 2019 の中からクリエイティブな作品をいくつかピックアップしています。

 

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

 

 

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

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

 

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

 

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

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