これらのまばゆいばかりの効果であなたのテキストを動かしてください

最近、すべてを動かす傾向がねぐらを支配しています。 この狂気を追いかけ、ウェブサイトの細部に生命を吹き込むことに執着するしかないのです。 静的な時代は終わりました。 すべてが動的です。 そして、あなたは何を知っていますか？ ユーザーはそれを完全に認識しています。

一部の人にとっては、それは悪いニュースです。静的なWebサイトがエキサイティングな体験をもたらすとユーザーを騙して信じさせるには、ヘラクレスの努力が必要になるからです。 他の人にとっては、それは誇示し、あなたの内なる天才を明らかにし、ダイナミックな狂気の世界に流されてしまう機会です。

タイポグラフィでできることは、風変わりな書体や贅沢なホバー効果を使用することだけだとまだ信じていない場合は、間違っていることを証明します。 タイポグラフィで驚異的なことをして、印象を与えるという点で他の人に譲らないものに変えることができます。

そして、あなたが没入型または重いソリューションのファンでないなら、これは確かに方法です。 確実なスタートを切るために、レタリングが巧みに動き始めた素晴らしいコードスニペットをいくつか収集し、優れた結果をもたらしました。

ArsenZbidniakovによる粉砕テキストアニメーション

ArsenZbidniakovによるShatteringTextAnimationをご覧ください。 見事じゃないですか？ このソリューションは、多くのアクションや不要なダイナミクスで訪問者を圧倒することも、システムに過負荷をかけることもありません。 それはただ機能し、誰もが「すごい」状態のままになります。

GSAPツールとSVGパスの助けを借りて作成された、テキストを組み立てたり分解したりするこの粉砕効果は、単純に信じられないほどです。 さらに、マウスカーソルをその上に置くと、プロセスの速度を制御する機会が得られ、すべての速度が低下します。 それはただ驚異的です。

SzeniaZadvornykhによるテキストアニメーション

最初の例と同じように、このコードスニペットは、テキストのアセンブルと逆アセンブルのアニメーションを示しています。 ただし、今回はアーティストがThree.jsを使用してすべてを実現しています。 これは別の制御可能な爆発です。 はい、あなたは私を正しく読んでいます：クリックしてドラッグすることでアニメーションの速度を制御することもできます。 そして、この実験を楽しんでいるなら、Szeniaにはもっと面白い例がいくつかあります。 彼のプロフィールをチェックしてください。

モーショングラフィック書体とAraによる別の実験

Araは、タイポグラフィを使った驚くべき実験をいくつか行っています。 次の例は両方とも、幾何学的な操作に基づいた抽象的なものであり、ハイテクな感じと見た目です。 いくつかの点で、彼らは少し奇妙ですらあります。

最初の例では、テキストは粒子の3Dトンネルをゆっくりとしかし確実に形成する小さな断片で構成されています。

2つ目では、各シンボルは、動き出す三角形、正方形、長方形などのプリミティブポリゴンから構成されます。 誰かのデジタルハンドがそれをすべて一緒に織り上げているように感じます。

NateWileyによるGSAPテキストアニメーション

Nate Wileyは、SplitTextをGreensockから有利に利用し、すばらしいテキストアニメーションを再現しました。 彼は通常のテキストを取り、それを小さな断片に吹き飛ばします。それぞれがシンボルです。 爆発後、キャラクターはさまざまな方向に移動し、スムーズに消えます。

CSSモーションタイポグラフィ：DudleyStoreyによる爆発的なテキスト

ハイエンドテクノロジーがソリューションの美しさの背後にある前の例とは異なり、ここではCSSベースのモーションがショーを実行します。 Dudley Storeyは、CSSキーフレームアニメーション、トランジション、JavaScript、SVG、およびAdobeIllustratorのちょっとした魔法を実行に移します。 単語は少し粉々になり、それからあなたがまだそれを読むことができるような方法で多角形の断片に分かれます。 タイポグラフィにスタイリッシュな残忍さを加えたいのであれば、この効果は確かに出発点です。

池田靖信によるThree.jsを使用した3Dの多くのアイコン

ネイト・ワイリーがテキストを吹き飛ばしている間、逆に池田靖信は画面全体に無秩序に散らばっている粒子を強制的にテキストに形成します。 ここでは、粒子は小さなアイコンにすぎません。 著者はThree.jsを使用して、このゴージャスな3Dアニメーションを再現します。

TaminoMartiniusによるSVGパスアニメーションテキスト

Tamino Martiniusは、SVGパスを使用することにより、従来の操作の恩恵を受けています。 なめらかな形、極細の線、液体のような振る舞いのおかげで、アニメーションは優雅さと洗練さを漂わせています。 最初の例ほど驚異的ではありませんが、確かに実用的なソリューションであるため、その力は多数のプロジェクトに適合する能力にあります。

より実用的な使用法について

そういえば、刺激的で実用的なソリューションもいくつか含まれています。 ここでは、この方向に赤ちゃんの一歩を踏み出すことができるように、タイプが動き始めています。

最初の2つの例は、タグラインとキャッチーなフレーズに役立つ効果を備えていますが、後者は通常のテキストブロックの興味深いソリューションです。

考える– MikaelAinalemによるサイクルの作成

Mikael Ainalemのペンは、単語が回転で強調表示される循環アニメーションを示しています。 これは、ユーザーをある単語から別の単語に導くための優れた方法です。

TryggviGylfasonによるプレス

Tryggvi Gylfasonは、左から右にスライドする動く線を追加し、文字をそれに従わせることで、単語の記号を押したり引いたりします。 効果は小さいですが、魅力的です。

IgnacioCorreiaによるTweenMaxによるテキストスクロールモーションブラー

Ignacio Correiaは、モーションブラー効果のあるテキストを提供します。 活発なペースで下に移動すると、テキストがぼやけてほぼ白いスポットになります。 速度を落とすと、言葉がわかりにくくなります。

タイポグラフィでアニメーションを使用する場合

これらの活版印刷のアニメーションは、私たちに行動を止めて楽しむことを強います。 それらは、ヒーロー領域などの他の要素で見ることができるアニメーションと同じくらい刺激的で人目を引くものです。

残念ながら、野生ではそれらの多くは見られません。 単純なレタリングを動かすのではなく、アクション満載のフルスクリーンアニメーションを使用することに誰もが夢中になっているようです。 しかし、ここで見てきたように、これらの効果はユーザーに同じくらいの影響を与える可能性があります。