Copy and Paste CSS3 Scrolling Text
Scrolling text HTML and CSS script tutorial
Step 1.) Download the script
scrolling text using CSS3
and HTML code. The scrolling works with HTML5 and responsive templates and in all newer CSS3 compliant web browsers as well as on iPad and iPhone. In non-compliant browsers the scroller will appear the same but will not animate.
May not animate in some versions of IE due to this browser not being CSS3 compliant. Only the first phrase will be displayed.
Step 2.) Copy files
From the zip file download, copy to your website folder the .css color theme file you want use (colors are editable after you copy over the css file).
Step 3.) Add css to your HTML head
For our example we have copied over the red theme (file "tickr-style-red.css"). Select, copy and paste the following code into your HTML webpage <head> section just above the </head> closing tag.
Edit the above from red to blue or black if you want to use a different theme.
Step 4.) Add HTML code
Select, copy and paste the following code into the <body> section of your HTML page:
Edit the text lines with your phrases. The last line is linked text, you can optionally make all lines linked or all lines not linked.
Step 5.) Test
Open your webpage and test your scroller.
Edit the "tickr-style-xx.css" to change the colors and font sizes. At the bottom of this file is css Media Queries code that makes the fonts smaller on mobile so the full phrase can fit on smartphones.
How did we get 3 different colors on one page?
Ancient Chinese secret... Actually, it's a little involved to do. We use the red theme "tickr-style-red.css" on this page, then added classes blue and black: <div id="tickr-box" class="blue">
to the 2nd and 3rd scroller HTML code. Then we made a special css file to mod only the blue and black color classes. Click to view tickr-style-support-mod.css
and also view the source code of this page to see how the blue and black classes were added.
Scrolling News IFrames