Latest Items added:

Full Component List:

Another Spinning Text

Another Spinning Text

The other Spinning Text component is based on a massive chunk of JS to create the circle. This one has a small SVG element that does the same. The SVG has to be placed in an HTML element.

You can make a basic and a more advanced version of this component. The difference is the reverse-spinning centre image. Without the image you have the basic version.

The somewhat tricky part here might be to get the text long enough - but not too long! - to fit in the circle that will be formed. To achieve that, you will have to balance the text length, the font-size and the letter-spacing with the width and heigth of the circle. The fiddling will be easier if you use a font that will appear the same in all browsers, like e.g. a Google font.

If you want to use the centre image, then pay close attention to the style rules for it. You may need to nudge it into the centre of the text circle, and the overflow has to be set to visible.

When working in SD you'll see a black text on a white background.
The text will display as only part of a circle, but in preview it will be correct. If you want to change the colours, it's best to do that after you have got the text right length- and fontwise, because you may not be able to see the text if the background is made very dark. The background colour should be given to the HTML element on the Style panel, and the text colour can be changed in the styles for the HTML element in the Head styles box on the Element panel.

This component may serve as an eye-catcher in advertisments. It is possible to add a link to the spinning text, pointing to some relevant page or site. A link to the image, however, will not work.

Placeholder Picture

Download this component