2

文字や単語が常に直立した状態で、テキストやグラフィックスを循環パスに沿って移動させる JavaScript スニペットが多数あります。

例: http://www.dseffects.com/f_scripts.html

月が地球を周回するように、1 つの面を常に中心に向けて、テキスト (またはグラフィック) を点の周回させたいと考えています。次の例はこれを示していますが、非常に大雑把で、Web フォントを使用していません。

例: http://javaboutique.internet.com/text/Manipulation/TextRotor/

最初の例のように (カーソルの周りだけでなく) オービット コードを変更して、各文字/画像が一方の側を中心 (軸) に保つようにする方法があると確信しています。

4

1 に答える 1

2

SVGは本当にこの種のことを行う方法です。私はこれを本当に素早く泡立てましたが、少なくともそれは例として機能します。HTML部分は大きく異なる可能性がありますが、これは1つの方法です。

これをhtmlページに入れます：

<iframe src="orbitingText.svg" width="100%" height="100%"></iframe>

次に、orbitingText.svgファイルを作成します（これは、拡張子が.svgの単なるテキストファイルです）。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 300 300">
<defs>
    <path id="textPath" d="M 150 75 a 75 75 0 1 0 0.00001 0"/>
</defs>
<circle cx="150" cy="150" r="40" stroke="blue" stroke-width="1"></circle>
<text fill="red">
    <textPath xlink:href="#textPath" startOffset="0">
        <animate attributeName="startOffset" dur="7s" from="0" to="500" repeatCount="indefinite" />
        Orbiting Text
    </textPath>
</text>

ああ、そしてあなたがクロスブラウザの互換性について心配しているなら、このサイトをチェックしてください： http ://code.google.com/p/svgweb/

于 2011-05-19T21:20:19.740 に答える