Scrolling Text

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="scrolling text, scroll text, marquee text, scrolled, scrolls, html scrolling, scrolls, html marquee code, html code for marquees, codes, scroll, scrolling text, upward, vertically, vertical scroll, scroller, scrollable, downward, up, down, top, bottom, left, right, horizontally, horizontal scroll. image, pic, picture, speed, help, effect, affect, paragraph, line, words, letters, numbers, rtl, ltr"> <meta name="Description" content="Create scrolling text with the HTML marquee code. Copy/paste codes for making your text scroll. Includes horizontal scroll and vertical scroll."> <link rel="canonical" href="https://www.quackit.com/html/codes/scrolling_text.cfm"> <title>Scrolling Text</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">Scrolling Text</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <p class="lead">This page contains copy/paste codes for scrolling text.</p> <h2>Scrolling Text using CSS</h2> <p>Here's an example of using a <a href="/css/codes/marquees/">CSS marquee</a> to create scrolling text. This method is standards-compliant as it uses <a href="/css/css3/animations/">CSS animations</a> to achieve the scrolling effect.</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>

	
<style>
.example1 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 font-size: 3em;
 color: limegreen;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0% { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0% { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0% { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
</style>

	
<div class="example1">
<h3>Scrolling text... </h3>
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/codes/marquees/scrolling_text" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>You can also <a href="/css/codes/marquees/">use CSS</a> to create slide-in text, vertical scrolling, bouncing text etc.</p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>HTML <code><marquee></code> Element</h2> <p>The following examples use the HTML <code><marquee></code> tag. As with the CSS method, the HTML method can also be used to give the text a horizontal scroll (from right to left, left to right), a vertical scroll (top to bottom, or bottom to top), as well as a bounce effect.</p> <div class="tip"> <h3>Non-Standard Tag</h3> <p>The <code><marquee></code> tag isn't an <a href="/html/tags/">offical HTML tag</a>. See <a href="/css/codes/marquees/">CSS marquees</a> for a standards-compliant marquee.</p> </div> <h3>Right to Left (RTL)</h3> <p>This section contains text that scrolls horizontally (right to left, left to right, or a combination). As you can see, there are a number of options with your horizontal scroll.</p> <h4>Slide-In Text</h4> <p>This text slides in from the right, then stays where it is. You will need to <a href="javascript:location.reload(true)">refresh</a> this page to see the effect again.</p> <p>Example:</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><marquee behavior="slide" direction="left">Your slide-in text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_marquee_code_slide-in_text" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h4>Continuous scrolling text (RTL)</h4> <p>Example:</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_marquee_code_continuous_scrolling_text" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h4>Faster Scrolling</h4> <p>This example uses <code>scrollamount="30"</code> to increase the scroll speed.</p> <div class="tip"> <p>Faster scrolling works better on continuous scrolling as opposed to slide-in text. This is because slide-in text stops after sliding in. If it slides in too fast, many users might miss the slide-in effect altogether.</p> </div> <p>Example:</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false"><marquee behavior="scroll" direction="left" scrollamount="30">Your continuous scrollable text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/scrolling_text_faster_scrolling" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h3>Left to Right (LTR)</h3> <h4>Slide-In Text</h4> <p>This text slides in from the left, then stays where it is. You will need to <a href="javascript:location.reload(true)">refresh</a> this page to see the effect again.</p> <p>Example:</p> <div class="code-only"> <textarea id="example5" autocomplete="off" spellcheck="false"><marquee behavior="slide" direction="right">Your slide-in text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/scrolling_text_slide-in_text_left_to_right" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode5 = CodeMirror.fromTextArea(document.getElementById("example5"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h4>Continuous scrolling text (LTR)</h4> <p>Example:</p> <div class="code-only"> <textarea id="example6" autocomplete="off" spellcheck="false"><marquee behavior="scroll" direction="right">Your slide-in text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/scrolling_text_continuous_scrolling_left_to_right" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode6 = CodeMirror.fromTextArea(document.getElementById("example6"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <div class="ad">  <div data-fuse="23059883632"></div> </div> <h3>Text bouncing back and forth</h3> <h4>Normal Speed</h4> <p>This text bounces at the default speed.</p> <p>Example:</p> <div class="code-only"> <textarea id="example7" autocomplete="off" spellcheck="false"><marquee behavior="alternate">Your bouncing text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/scrolling_text_bounce" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode7 = CodeMirror.fromTextArea(document.getElementById("example7"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h4>Faster Bounce</h4> <p>This example uses <code>scrollamount="30"</code> to speed up the scrolling/bouncing text.</p> <p>Example:</p> <div class="code-only"> <textarea id="example8" autocomplete="off" spellcheck="false"><marquee behavior="alternate" scrollamount="30">Your fast bouncing text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/scrolling_text_faster_bounce" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode8 = CodeMirror.fromTextArea(document.getElementById("example8"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h3>Text Scrolling Up</h3> <p>This text has a vertical scroll - it starts at the bottom and moves up. As with some of the previous examples, you can adjust the scroll speed by using the <code>scrollamount</code> attribute. You could also create a vertical slide by using <code>behavior="slide"</code>.</p> <p>Example:</p> <div class="code-only"> <textarea id="example9" autocomplete="off" spellcheck="false"><marquee behavior="scroll" direction="up" style="height:200px;">Your upward scrolling text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/scrolling_text_scroll_up" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode9 = CodeMirror.fromTextArea(document.getElementById("example9"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h3>Text Scrolling Down</h3> <p>This text also has a vertical scroll, but this time it starts at the top and moves down. </p> <p>Example:</p> <div class="code-only"> <textarea id="example10" autocomplete="off" spellcheck="false"><marquee behavior="scroll" direction="down" style="height:200px;">Your downward scroller text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/scrolling_text_scroll_down" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode10 = CodeMirror.fromTextArea(document.getElementById("example10"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h3>Various Scrolling Speeds</h3> <p>This example demonstrates 3 different scrolling speeds.</p> <p>Example:</p> <div class="code-only"> <textarea id="example11" autocomplete="off" spellcheck="false"><marquee behavior="scroll" direction="right" scrollamount="1">Tortoise</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Hare</marquee>
<marquee behavior="scroll" direction="right" scrollamount="20">Cheetah</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/scrolling_text_various_scroll_speeds" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode11 = CodeMirror.fromTextArea(document.getElementById("example11"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h3>Jumping Text</h3> <p>The following example uses the <code>scrolldelay</code> attribute to slow the scrolling text down and make it look like it's jumping across the screen. Actually, the example also uses the <code>scrollamount</code> attribute to increase the size of each jump.</p> <p>Example:</p> <div class="code-only"> <textarea id="example12" autocomplete="off" spellcheck="false"><marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="500">Your jumping text goes here</marquee></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/scrolling_text_jumping_text" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode12 = CodeMirror.fromTextArea(document.getElementById("example12"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <div class="info"> <h4>Browser Compatibility</h4> <p>Some browsers don't render the jumping effect. Instead, the text will scroll smoothly.</p> </div> <h3>Marquee Attributes</h3> <p>The <code><marquee></code> tag accepts a number of attributes (some of which are included in the above examples). Feel free to experiment with these settings to see the effect they have on your scrolling text. The full list of attributes are:</p> <table class="tabular"> <tr><td><code>width</code></td><td>Sets the width of the marquee</td><td><code>scrollamount</code></td><td>How far to jump as it moves</td></tr> <tr><td><code>height</code></td><td>Sets the height of the marquee</td><td><code>loop</code></td><td>How many times it should loop</td></tr> <tr><td><code>direction</code></td><td>Sets the direction of the marquee</td><td><code>bgcolor</code></td><td>Sets the background color of the marquee</td></tr> <tr><td><code>behavior</code></td><td>Whether to slide, bounce, or scroll</td><td><code>hspace</code></td><td>Sets the amount of horizontal space around the marquee</td></tr> <tr><td><code>scrolldelay</code></td><td>How long the marquee should wait before each jump</td><td><code>vspace</code></td><td>Sets the amount of vertical space around the marquee</td></tr> </table> <h3>Falling Text</h3> <p>You can use scrolling text for some great effects:</p> <div class="example-display" style="position:relative;height:600px;"> <marquee style="z-index:2;position:absolute;left:18%;top:47%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:100px;"scrollamount="3" direction="down">Scroll</marquee><marquee style="z-index:2;position:absolute;left:1%;top:39%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:50%;"scrollamount="7" direction="down">Scrolling text effects...</marquee><marquee style="z-index:2;position:absolute;left:11%;top:7%;font-family:Cursive;font-size:14pt;color:lime;height:302px;"scrollamount="4" direction="down">...cool!</marquee><marquee style="z-index:2;position:absolute;left:25%;top:33%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:435px;"scrollamount="3" direction="down">Scrolling text effects...</marquee><marquee style="z-index:2;position:absolute;left:15%;top:13%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:432px;"scrollamount="2" direction="down">Scroll...</marquee><marquee style="z-index:2;position:absolute;left:8%;top:29%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:369px;"scrollamount="1" direction="down">Scrolling text...</marquee><marquee style="z-index:2;position:absolute;left:30%;top:17%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:289px;"scrollamount="7" direction="down">Text effects...</marquee><marquee style="z-index:2;position:absolute;left:46%;top:27%;font-family:Cursive;font-size:14pt;color:#f90;height:78px;"scrollamount="7" direction="down">Marquees...</marquee><marquee style="z-index:2;position:absolute;left:16%;top:17%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:56px;"scrollamount="5" direction="down">Scrolling text effects...</marquee><marquee style="z-index:2;position:absolute;left:30%;top:46%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:194px;"scrollamount="2" direction="down">Scrolling effects...</marquee><marquee style="z-index:2;position:absolute;left:2%;top:10%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:251px;"scrollamount="6" direction="down">Marquees</marquee><marquee style="z-index:2;position:absolute;left:48%;top:24%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:154px;" direction="down">Scrolling effects...</marquee><marquee style="z-index:2;position:absolute;left:41%;top:22%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:82px;" direction="down">Scrolling text</marquee><marquee style="z-index:2;position:absolute;left:46%;top:2%;font-family:Cursive;font-size:14pt;color:Fuchsia;height:70px;"scrollamount="3" direction="down">...effects...</marquee><marquee style="z-index:2;position:absolute;left:42%;top:15%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:334px;" direction="down">Scrolling text effects...</marquee><marquee style="z-index:2;position:absolute;left:40%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:167px;"scrollamount="7" direction="down">Scrolling text effects...</marquee><marquee style="z-index:2;position:absolute;left:45%;top:18%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:420px;"scrollamount="7" direction="down">Snow effects...</marquee><marquee style="z-index:2;position:absolute;left:22%;top:26%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:12px;"scrollamount="7" direction="down">Snow?</marquee><marquee style="z-index:2;position:absolute;left:49%;top:4%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:366px;"scrollamount="2" direction="down">Rain?</marquee><marquee style="z-index:2;position:absolute;left:26%;top:32%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:358px;"scrollamount="1" direction="down">Confetti?</marquee><marquee style="z-index:2;position:absolute;left:3%;top:14%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:130px;"scrollamount="3" direction="down">Scrolling text effects...</marquee> </div> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/html/codes/scrolling_images.cfm" title="Scroll your images with the marquee tag">Scrolling Images</a></li> <li><a href="/html/codes/stop_marquee.cfm" title="Stop and start your marquee by hovering over it with your mouse.">Stop/Start Marquee</a></li> <li><a href="/html/html_generators/html_marquee_generator.cfm" title="Generate your marquee codes automatically.">Marquee Generator</a></li> <li><a href="/javascript/codes/javascript_scroll.cfm" title="Create a marquee using JavaScript instead of HTML">JavaScript Scroll</a></li> <li><a href="/css/codes/marquees/" title="Create standards-compliant marquees">CSS Marquees</a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/html/codes/">HTML Codes</a></h3> <ul> <li><a href="/html/codes/html_background_codes.cfm" title="Set background properties on any HTML element.">HTML Background Code</a></li> <li><a href="/html/codes/bold/" title="Specify bold text in your HTML code.">HTML Bold</a></li> <li><a href="/html/codes/color/" title="Add color to your HTML code.">HTML Color</a></li> <li><a href="/html/html_color_codes.cfm" title="Hexadecimal color codes">HTML Color Codes</a></li> <li><a href="/html/codes/comment_box_code.cfm" title="Create a comment box within your HTML codes.">HTML Comment Box Code</a></li> <li><a href="/html/codes/html_scroll_box.cfm" title="Create a scroll box within your HTML codes.">HTML Scrollbox Code</a></li> <li><a href="/html/codes/tables/" title="Add an HTML table to your web page or blog.">HTML Tables</a></li> <li><a href="/html/codes/text/" title="Specify font family, size, color and more within your HTML code.">HTML Text Code</a></li> <li><a href="/html/codes/html_picture_codes.cfm" title="Embed pictures within your HTML code.">HTML Image Code</a></li> <li><a href="/html/codes/link/" title="Create hyperlinks between web pages and other documents.">HTML Link Code</a></li> <li><a href="/html/codes/html_marquee_code.cfm">HTML Marquee Code</a></li> <li><a href="/html/html_music_code.cfm">HTML Music Code</a></li> <li><a href="/html/codes/html_video_codes.cfm">HTML Video Code</a></li> <li><a href="/html/codes/html_form_code.cfm">HTML Form Code</a></li> <li><a href="/html/codes/html_frames_code.cfm">HTML Frames Code</a></li> <li><a href="/html/html_special_characters.cfm" title="ISO-8859-1">HTML Entities</a></li> <li><a href="/html/examples/" title="Copy/paste examples">HTML Examples</a></li> <li><a href="/html/html_help.cfm" title="HTML help with tables, forms, fonts, color, image maps, hyperlinks and more.">HTML Help/Cheat Sheet</a></li> <li><a href="/html/templates/" title="Thousands of pre-built websites">HTML Templates</a></li> <li><a style="padding-left:60px;font-style:italic;" href="/html/codes/">More Codes...</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

Scrolling Text