2

There are a number of JavaScript snippets that will make text or graphics travel along a circular path with the letters or words always upright.

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

I want to have text (or graphics) orbit a point the way the moon orbits the Earth, with one face always toward the center. The following example shows this, but very crudely and not using web fonts.

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

I am sure there is a way to modify orbiting code like the first example (only not around the cursor) so that each letter/image keeps one side toward the center (axis).

pimvdb
  • 151,816
  • 78
  • 307
  • 352
InfiniteMonkeys
  • 91
  • 2
  • 8
  • svg performs best using text along a path, because it is designed to do so, and because it does not pixelate the text – Jesufer Vn May 19 '11 at 19:26

1 Answers1

2

SVG really is the way to go for this kind of thing. I just whipped this up really quick but at least it works as an example. The HTML part can vary a lot but this is one way.

Put this into an html page:

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

Then, create the orbitingText.svg file (it's just a text file with a .svg extension):

<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>

Oh, and if you are worried about cross-browser compatibility, check out this site: http://code.google.com/p/svgweb/

BCDeWitt
  • 4,540
  • 2
  • 21
  • 34
  • 1
    Thank you. This is very interesting. I will need to figure out how to parameterize it. I made a few changes, but still haven't figured out how to get the start of the circle to the bottom. More importantly, I tried putting it in an AP Div tag, which is what I will need to control the location and transparency and it didn't seem to work that way. I'll keep playing with it and see if it satisfies my needs. – InfiniteMonkeys May 20 '11 at 03:09
  • You can actually inject the SVG tag directly into an HTML5 document. (inside of an AP Div tag, too) when I tried that out, though, the animation stopped working. This page explains the different ways you can put svg into a web page: http://www.w3schools.com/svg/svg_inhtml.asp You may also need to set the preserveAspectRatio attribute to get it to display correctly in an AP Div: http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute – BCDeWitt May 20 '11 at 16:00
  • By default, an SVG tag seems to fill its container. So, width="100%" and height="100%" are implied if they are missing. SVG has its own DOM so you can edit parts of it with Javascript or you can apply some CSS properties to the SVG tags to do some interesting stuff. I'm pretty sure transparency could be done through CSS but I haven't tried it out yet. (Try changing the opacity attribute on the circle or text tags?) – BCDeWitt May 20 '11 at 16:04