Copy and Paste CSS3 Scrolling Text
Scrolling text HTML and CSS script tutorial
Simple responsive 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.
See Also…
See Also…
Latest News
- Get an Allwebco template today!
- Be the envy of friends and family!
- The perfect website development solution!
- Click now to ORDER, ORDER, ORDER!
Step 1.) Download the script
This scroller does not use any Javascript, it's a pure css script using animate and @keyframes styles. The zip file includes the 3 css color files and working sample HTML pages. Note: 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.
Latest News
- Get an Allwebco template today!
- Be the envy of friends and family!
- The perfect website development solution!
- Click now to ORDER, ORDER, ORDER!
Latest News
- Get an Allwebco template today!
- Be the envy of friends and family!
- The perfect website development solution!
- Click now to ORDER, ORDER, ORDER!
Configuration
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.
Related Topics:
Scrolling News IFrames