HTML Marquee Code

Code for adding scrolling text & images to your website or blog.

CSS Marquee

<!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<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>

<!-- HTML -->	
<div class="example1">
<h3>Scrolling text... </h3>
</div>

CSS marquees are the standards-compliant way of creating marquees in HTML.

More CSS Marquees

Bootstrap Carousel

<!DOCTYPE html>
<title>My Example</title>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
		
<!-- Carousel container -->
<div id="my-pics" class="carousel slide" data-ride="carousel" style="width:300px;margin:auto;">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-pics" data-slide-to="0" class="active"></li>
<li data-target="#my-pics" data-slide-to="1"></li>
<li data-target="#my-pics" data-slide-to="2"></li>
</ol>

<!-- Content -->
<div class="carousel-inner" role="listbox">

<!-- Slide 1 -->
<div class="item active">
<img src="/pix/samples/16l.jpg" alt="Sunset over beach">
</div>

<!-- Slide 2 -->
<div class="item">
<img src="/pix/samples/4l.jpg" alt="Rob Roy Glacier">
</div>

<!-- Slide 3 -->
<div class="item">
<img src="/pix/samples/15l.jpg" alt="Longtail boats at Phi Phi">
</div>

</div>

<!-- Previous/Next controls -->
<a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>

</div>
		
<!-- jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>

The Bootstrap carousel is also standards-compliant, as it is basically a Bootstrap version of a CSS marquee.

About Bootstrap Carousels

HTML Marquees

You can also use the <marquee> tag to create a marquee. You can make the text/images scroll from right to left, left to right, top to bottom, or bottom to top.

The <marquee> tag is non-standard HTML. Despite this, it has enjoyed widespread browser support. For a standards-compliant method, see CSS Marquees or Bootstrap Carousels.

If you can't view the examples, it's likely that your browser doesn't support the <marquee> tag.

Continuous scrolling text

This marquee causes the text to scroll continuously from right to left. Once it disappears from the left, it re-appears from the right.

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

Slide-in text

This text slides in from the right, then stays where it is. You will need to refresh this page to see the effect again.

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

Text bouncing back and forth

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

Text Scrolling Upwards

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

Change the Scrolling Speed

<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>

Scrolling Images

Simply replace the src="... part with the location of your own image.

<marquee behavior="scroll" direction="left">
<img src="/pix/smile.gif" width="100" height="100" alt="smile">
</marquee>

Images & Text (Both Scrolling)

Simply add your text under the image tag (but still within the marquee tags).

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

Cool Effects with Marquees!

You can use HTML marquees for some cool effects. Check out this falling text (generated with the Falling Text Generator)...

Marquee effects... cool!Marquee effects... cool!...cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquees...Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!...effects...Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!

Web.QHMIT.com