マウスを動かすと文字が文字で表示されます

これはテキストを表示する最も素晴らしい方法の1つでなければなりません。各文字は、マウスの移動時にのみ表示されます。速い動き、速いテキストの出現、遅い動き、遅い出現。マウスを動かすと文字が文字で表示されます

これにアプローチして実装するにはどうすればよいでしょうか？

Example（一度、下にスクロールして、あなたのマウスを移動）あなたの助けの人たちのための

おかげでたくさん！

2017-05-30 Jay M

JavaScriptを使用しています。既に何かをコード化しようとしましたか？ –

私はかなり新しくコーディングしていて、ほとんどがコードスニペットを投げたり、フロントエンドエディタで作業していました。しかし、私は学んでいます。おそらくこれをいくつかのテキストでsvgとして処理し、各文字をアニメーション化することは可能でしょう。しかし、よりスマートな方法があると信じています（おそらく、maccambridgeが提案したもの）。 –

例を見ると、各文字がそれ自身のdivでレンダリングされていることが分かります。 DOMノードと同じように、各divのレンダリングを制御することができます。

動きは、マウスを動かす速度にかかわらず、一定の速度で行われます。したがって、1つのフレームレートと期間で1つのアニメーションが存在します。マウスの移動は効果的に「再生/一時停止」機能を制御します。

したがって、より大きなアニメーションの一部として各文字のアニメーションを作成する必要があります。次に、マウスが動いているかどうかを知るために、マウスイベントを聞く必要があります。そうであれば、アニメーションを再生します。そうでない場合は、一時停止します。

これは、短い、高いレベルの答えです。たぶん誰かがあなたにいくつかのコードを教えてくれるかもしれません。

出典

2017-05-30 21:03:22 mccambridge

ありがとうございました。私は本当にあなたの助けに感謝します！私のコーディングの知識は限られていますが、あなたが記述した概念を理解しており、これをさらに進化させる可能性があります。 –

これは完全なハウツーのフォーラムです。私はこのライブラリが周りにグーグルであることを発見した。あなたが探しているものとまったく同じではありませんが、面白いかもしれません：http://textillate.js.org/ Googleの「text animation css keyframes」のようなものです。 – mccambridge

ありがとう！私は既にテキスタイルについて知っていて、それを調べました。これがこのアプローチに最適な方法だと思いますか？私はsnap.svgでそれを試し、単に.svgとしてテキストを使用する傾向がありました。最も難しいのは、私がプレイ/ポーズコンセプトで何かをやったことがない、あるいは見たことのない「マウスイベントを聞いて」から来るでしょう。 –

マウスを動かすと文字が文字で表示されます

答えて

関連する問題