javascript - 移動時にdivの後に点線の「トレイル」を作成する

Question

このデモで使用されているメニューの大幅に変更されたバージョンがあります。

小さい円がファンアウトするとき、中央のメインアイテムと小さい外側の円の間に複数の小さな「ドット」を配置します。これにより、2つのアイテムを結ぶ点線が形成されます。

これと同様の効果がありますが、放射状のパターン（オレンジ色の円）で複数回発生します。

これを動的に達成するための最良の方法は何でしょうか？

Answer 1

通常、この種のことについては、 Raphaelのようなライブラリを使用することをお勧めします。HTML DOMではなくグラフィックライブラリを使用してグラフィック効果をレンダリングすると、特に物事がより複雑になるにつれて、物事が簡単になる傾向があります。また、達成できることに対してはるかに柔軟です。Raphaelサイトには、その機能のデモがたくさんあります。RaphaelAPIのコツをつかめば、このような効果は非常に簡単になると思います。欠点は、この方法をとる場合、おそらくRaphaelを使用してメニュー全体を作成する必要があるため、すでに持っているものを破棄して最初からやり直すことになります。

したがって、この場合、通常のHTML要素を使用するだけの実用的なデモがすでにあるので、持っているもので作業することもできます。変更するのはそれほど難しいことではないようです。メインメニュー要素の後ろにレイヤー化された要素のセットを追加し、それらがフォローしているメニュー要素と同じ速度でアニメーション化するように設定しますが、距離は短くなります。

これはかなりの追加のマークアップですが、うまくいくはずです。おそらく100通りの方法があるので、詳細な手順は説明しません。チュートリアル全体を思いつく時間はありませんが、結局のところ、それはコピーと貼り付けの場合にすぎないはずです。コードを書く最も洗練された方法ではありませんが、うまくいくはずです。私が予測できる唯一の注意点は、画面上で同時に5倍の数のアニメーションがアニメーション化されていると、速度が低下する可能性があることです。しかし、それはあなたが物事を機能させたら取り組むことができます。

Answer 2

必要なアニメーションのサンプルを作成しました。方法は次のとおりです。

放射状のグラデーションの背景を持つオレンジ色のドットを作成し、それを繰り返します。

background: radial-gradient(circle, orange 5px, transparent 5px) 15px 0;
background-size: 20px 10px;

要素を回転させます。

transform: rotate(-45deg);
transform-origin: 0 0;

バックサークルが飛び出したら、要素の幅を変更し、トランジションを使用して滑らかにします。私の例ではアニメーションを使用しましたが、大きな違いはありません。

transition: width 2s;