HTML Marquee Code

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

CSS Marquee

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

View Output

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

More CSS Marquees

Bootstrap Carousel

<!DOCTYPE html>
  <title>My Example</title>

View Output

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.

View Output

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.

View Output

Scrolling Images

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

View Output

Images & Text (Both Scrolling)

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

View Output

Cool Effects with Marquees!

You can use HTML marquees for some cool effects:

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!

HTML Marquee Code

CSS Marquee

Bootstrap Carousel

HTML Marquees

Continuous scrolling text

Slide-in text

Text bouncing back and forth

Text Scrolling Upwards

Change the Scrolling Speed

Scrolling Images

Images & Text (Both Scrolling)

Cool Effects with Marquees!

Related