How can I add moving text to my site?

  • 0
  • 3
  • Question
  • Updated 3 years ago
  • Answered
The scrolling text element from the old desktop Sitebuilder is no longer available in Sitebuilder Plus.  The java element could cause problems and security warnings on browsrs running older versions of Java.  Here are some code snippets that you can use that are HTML.  You can add them into an HTML box and customize the text.

1) Slide in text.  The text will slide in from right to left and stop.

<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>

2) Continuous scrolling text.  This text will scroll from right to left and contiune off the left and then restart from the right.

<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>

3) Bouncing text.  This text will scroll back and forth.

<marquee behavior="alternate">Your bouncing text goes here</marquee>

4) Upward scrolling:

<marquee  behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>

5) Scroll speed.  Use the scrollamount variable to change the speed of the scroll.

<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>

6) Scrolling image. 

<marquee behavior="scroll" direction="left"><img src="imagename" width="100" height="100" alt="alt-text" /></marquee>

7) Scrolling image with text

<marquee behavior="scroll" direction="left">
<img src="imagename" width="100" height="100" alt="alt-text" />
<p>Sample text under a <a href="/html/codes/scrolling_images.cfm">scrolling image</a>.</p>
</marquee>

8) Falling text.  Play with the variables to see the different effects. This one is more advanced, including multiple variables.

<marquee style="z-index:2;position:absolute;left:50;top:85;font-family:Cursive;font-size:14pt;color:ffcc00;height:449;"scrollamount="2" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:95;font-family:Cursive;font-size:14pt;color:ffcc00;height:136;"direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:15;top:66;font-family:Cursive;font-size:14pt;color:ffcc00;height:410;"scrollamount="2" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:135;top:24;font-family:Cursive;font-size:14pt;color:ffcc00;height:162;"scrollamount="2" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:206;top:23;font-family:Cursive;font-size:14pt;color:ffcc00;height:94;"scrollamount="3" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:46;top:95;font-family:Cursive;font-size:14pt;color:ffcc00;height:44;"scrollamount="5" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:8;top:97;font-family:Cursive;font-size:14pt;color:ffcc00;height:212;"scrollamount="7" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:94;top:48;font-family:Cursive;font-size:14pt;color:ffcc00;height:41;"scrollamount="2" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:46;top:36;font-family:Cursive;font-size:14pt;color:ffcc00;height:170;"scrollamount="6" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:207;top:88;font-family:Cursive;font-size:14pt;color:ffcc00;height:420;"scrollamount="4" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:129;top:19;font-family:Cursive;font-size:14pt;color:ffcc00;height:365;"scrollamount="1" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:203;top:84;font-family:Cursive;font-size:14pt;color:ffcc00;height:126;"scrollamount="6" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:229;top:49;font-family:Cursive;font-size:14pt;color:ffcc00;height:3;"scrollamount="7" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:125;top:90;font-family:Cursive;font-size:14pt;color:ffcc00;height:309;"scrollamount="4" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:216;top:39;font-family:Cursive;font-size:14pt;color:ffcc00;height:221;"scrollamount="1" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:167;top:13;font-family:Cursive;font-size:14pt;color:ffcc00;height:362;"scrollamount="4" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:303;top:58;font-family:Cursive;font-size:14pt;color:ffcc00;height:449;"scrollamount="3" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:168;top:90;font-family:Cursive;font-size:14pt;color:ffcc00;height:198;"scrollamount="5" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:280;top:88;font-family:Cursive;font-size:14pt;color:ffcc00;height:329;"scrollamount="5" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:183;top:77;font-family:Cursive;font-size:14pt;color:ffcc00;height:94;"scrollamount="1" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:309;top:35;font-family:Cursive;font-size:14pt;color:ffcc00;height:123;"scrollamount="3" direction="down">Text... or snow?!</marquee><span style="position:absolute;top:400px"></span>
Photo of Drew N

Drew N, Community Manager

  • 257,282 Points 100k badge 2x thumb

Posted 4 years ago

  • 0
  • 3
Photo of Margaret6201

Margaret6201

  • 100 Points 100 badge 2x thumb

Okay, then how do I customize the size.  I copied and pasted the html.  I am new to html.

Photo of Drew N

Drew N, Community Manager

  • 257,138 Points 100k badge 2x thumb
You will have to experiment with that. You can change the numbers that refer to height or width and see how it affects it when you hit preview.

Drew
Photo of Dian 1574

Dian 1574

  • 162 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled Scrolling Text.

How do I add Scrolling text to go across my screen
Photo of Drew N

Drew N, Community Manager

  • 257,138 Points 100k badge 2x thumb
Dian 1574,

You can play with some of these HTML effects and see what you like.

Drew
Photo of FOL Admin

FOL Admin

  • 296 Points 250 badge 2x thumb

Thanks for those codes.  I added a Scroll in Text to my Main Page, but how do I get the fonts bigger and Bold?   

Do you anticipate on uploading more FONT's options then the standard ones you offer?

Photo of Drew N

Drew N, Community Manager

  • 257,138 Points 100k badge 2x thumb
You need to add font controls to the HTML. Something like this,

<style type="text/css">
.html-marquee {height:100px;width:600px;background-color:FFFFFF;background-image:url(http://);font-family:Cursive;font-size:42px;color:000000;font-weight:bold;}
</style>
<marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="12" ><img src="http://"> You message goes here</marquee>

Drew

Hi Drew

Thank you again for your help!  I've got the html code working.  2 other quick questions:

1) how do I change the text?  In terms of colors, boldness, size, etc - is there an example of code using what I'm using so I'd know how to do this and can simply plug in??

2) I have a bunch of little Xs all over my website.  They appeared last week and are all over the place.  They are located in the upper left corner of most objects I have on my site.  They are tiny black boxes with a white X.  I chatted with someone from Homestead about this several days ago and they said they didn't know what it was and they'd get back to me.  I never heard back from anyone...

Any suggestions on how I can remove them?  This is really unprofessional looking and I'm afraid of what customers are seeing.  www.goldcoastacademy.org

Thank you!

Michael

also:  regarding the white Xs - they only appear when I am on internet explorer.  If I am on Chrome I see something else - looks like a small paper icon...

What are these things???

Thanks again

Photo of Drew N

Drew N, Community Manager

  • 257,138 Points 100k badge 2x thumb
1) You have to add tage for color, size and bold.
<font color="#FF0000">
<font size="6">
<b>Your message goes here</b>

So it may look like this: <marquee class="html-marquee" direction="left" behavior="scroll" width="200"><font size="6"><font color="#FF0000"><b> Your message goes here</b></marquee>

2) Unfortunately, those are a result of the migration as well and may be there for a short while longer. I am really sorry for that.

Drew
Photo of vfw59767297

vfw59767297

  • 154 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled HOW CAN I PUT A SCROLLING WORD MARQUE ON ONE OF MY PAGES.
Photo of Drew N

Drew N, Community Manager

  • 257,138 Points 100k badge 2x thumb
We have the HTML for several effects posted here, but as Susan said, it should be used sparingly if at all.