みんなタイポグラフィが大好きです。さらに、それが動いたりダイナミックな効果を持って表示されれば、さらに好きになります。
想像力を駆り立てるための方法はたくさんあり、それを使う場所も多くあるのは当然のことです。見出し、キャッチフレーズ、テキストブロックなど、無限にあるでしょう。
最近、テキストの歪み効果に注目が集まっています。グリッチ効果は最も注目されているものです。いろいろなところで目にします。背景、アニメーション、ビデオ、そしてもちろん見出しを飾っています。
ルーカスベッバー氏によるグリッチテキスト
いくつかの美しいタッチでアナログのように見えるクラシックな見た目で、CSSの助けのみを借りて作成されたので、軽量で高速です。テキストが私たちの目を悩ませないように、効果はある程度の時間止まります。その後、さりげなく繰り返されます。
しかし、これは唯一の例ではありません。歪み文字が美しさと全体的な影響を持つものなので、いろいろなところで使われています。いくつかを見ていきましょう。
See the Pen
Ants! (with blotter.js) by Bennett Feely (@bennettfeely)
on CodePen.
ベネット・フェリーによる蟻！
テキスト効果を描画するための最新のJavaScript APIのBlotter.jsを使用して、ベネット氏は素晴らしいアイデアを実現しました。ここでは、混沌とした動きをする100個の小さな物体が不規則な形を構成しています。アリの群れを思い出させますが、その効果は気持ちわるかったり、いらだつものではありません。それどころか、興味深く魅力的な見た目です。
See the Pen
Ants! (with blotter.js) by Bennett Feely (@bennettfeely)
on CodePen.
カタリナマリーバーメイスター氏による水中SVGテキスト
最近では、水の効果がウェブ開発者の間で信じられないほど人気がでてきています。上部中央のヒーローエリアの背景を美しくする水面で飾ることができます。そしてタイポグラフィも例外ではありません。この流行に乗りたい人たちに、カタリナマリーバーメイスター氏はどんなテキストにも素敵な水中タッチを与える簡単な方法を用意してくれました。
Pen
Underwater SVG Text by Katrine-Marie Burmeister (@Katrine-Marie)
on CodePen.
コレンティン氏によるゆがみ効果
物事をもう少しインタラクティブにして、訪問者を巻き込みましょう。このアーティストのアイデアは、ベネットフィーリー氏のアイデアよりも贅沢なものではなく、カタリナマリーバーメイスター氏によって作成されたアイデアよりも魅力的です。これは、ユーザーがマウスカーソルをレタリングの上に置くと現れる液体のような動作をします。それはシンプルですが、人目を引くものです。
See the Pen
distortion by Corentin (@corentinfardeau)
on CodePen.
ノーネーム氏による粒子テキスト
これは、魅力的な性質を表示するため、ユーザーの参加が必要なものです。すべての文字は、マウスカーソルが接触すると四方八方に動き始める多数の点で構成されています。まるで息をかけて吹き飛ばそうとしているように感じます。それでも、すべてを結びつけてシンボルを完全に分割できないよう接着された場所もいくつかあります。
See the Pen
PARTICLE TEXT by noname (@al-ro)
on CodePen.
シバウドゴイフォン氏による粒子テキスト
上のものが少し暗いと感じるなら、このスニペットは明るい外観と遊び心で間違いなくあなたを元気づけてくれます。
シバウドゴイフォン氏は、さまざまなサイズと色の何千もの黒丸を使用して、際立ったコンセプトを打ち出しました。また、重力、時間、速度、半径、解像度などの変数を変更できる小さなコントロールパネルを備えています。あなた自身のアートワークを作成するために設定を試してみてください。
See the Pen
Text particle by Thibaud Goiffon (@Gthibaud)
on CodePen.
レイチェルスミス氏による動的3D紙吹雪テキスト
この例は、前の例と同じ魅力を持っています。自分の好きなテキストを追加できてとても楽しいです。各シンボルは、さまざまなサイズの多数のカラフルな三角形で構成されていて、ここでの歪み効果はきちんとしていて繊細なものです。テキストは大胆な外観にもかかわらずエレガントに見え、軸に沿って動かしてさまざまな角度から見ることもできます。
See the Pen
dynamic 3D confetti text by Rachel Smith (@rachsmith)
on CodePen.
畔上達也氏によるスパークテキストSCSS
コレンティン氏によって作成されたプロジェクトのように、このソリューションは見る人を楽しませることを目的としています。テキストの上にマウスカーソルを置くと、細い直線が突き刺さり、文字を鋭い矢印のように吹き飛ばします。もちろん、すべてがすぐに元に戻ります。強い印象を与えるのに十分です。
See the Pen
Spark Text SCSS by Tatsuya Azegami (@42EG4M1)
on CodePen.
ルーカスベッバー氏によるくしゃくしゃテキスト
ルーカスベッバー氏によるしわしわのテキストは少しグリッチがあります。曖昧な効果で、恐怖に震えているように感じます。ハロウィン用ウェブサイトにいいかもしれません。SVGフィルタに基づくもう一つの純粋なCSS実現例です。このソリューションはクロームでのみテストされ、他の一般的なブラウザでも機能します。
See the Pen
Squiggly Text by Lucas Bebber (@lbebber)
on CodePen.
ジョシュアワードによるテキストの歪み
これはユーザーによる操作が必要なもう1つの例です。マウスカーソルをテキストに当てると、別のレイヤーが表示されます。それは各文字に3D効果を与える青とピンク色のレイヤーで、テキストが震えてみる振動効果を持ち、注意を引きます。
See the Pen
@VICELAND | Text Distortion by Joshua Ward (@joshuaward)
on CodePen.
ジャスティンウィンドル氏によるゆがみ文字効果
ジャスティンウィンドル氏は、テキスト効果の1つをレベルアップしました。古いタイピング効果は、ここでは新しく、シンプルかつスタイリッシュに見えます。効果のデコード部分は、きれいです。それはとても普遍的でエレガントなので、多くのプロジェクトに適しています。
See the Pen
Text Scramble Effect by Justin Windle (@soulwire)
on CodePen.
さらにスクランブル効果を探しているなら、他にも役に立つコードスニペットがあります。例えば、ウィルノーグル氏によるゆがみ文字を試してみてください。これはジャスティン氏の作品に似ています
See the Pen
Text Distort by Will Naugle (@willynogs)
on CodePen.
さらにスクランブル効果を探しているなら、他にも役に立つコードスニペットがあります。例えば、ウィルノーグル氏によるゆがみ文字を試してみてください。これはジャスティン氏の作品に似ています。
See the Pen
Text shuffle & distort fx by Blaz Kemperle (@blazicke)
on CodePen.
ブラズケンパール氏によるテキストシャッフルは、ユーザーが下にスクロールすると、シャッフルがはじまります。どちらも同じコンセプトに基づいていますが、異なるもので、それぞれ独自の魅力を持っています。
ゆがみ効果のまとめ
サイバウドグリフォン氏によるテキスト粒子の例のように、テキストの歪みを使って遊び心のある雰囲気を作り出すことができます。一方、ブラズブラズケンパール氏によるテキストシャッフルのようなビジネス的な雰囲気も作り出せます。
テキストの歪み効果を使用すると、さまざまなコンセプトをプロジェクトに追加でき、見出しにスポットライトを当て、インターフェースを魅力的にできるのです。次のプロジェクトに似たようなものを作成するのは、多くの労力を必要とするかもしれませんが、それでも確かによりよいユーザーエクスペリエンスと印象を獲得できるでしょう。
おすすめ新着記事
おすすめタグ