22 Outstanding Marquee Text Effects For Blogger

Today we are going to share another tutorial just for you. That is a cool text effect that everybody should learn. In this tutorial, you'll learn how to create Marquee text effect. Additionally, you will also learn how to build Marquee image effects. With this tutorial, you'll be taught how to make marquee text effects that will catch your reader's attention. This tutorial is for more knowledgeable designers, helping them to create special effects. This isn't a complex text decoration phenomenon, but a quite simple trick for making a great user experience. Scrolling or mouse movements interact with various properties on the page creating animations, but here you will learn how to build marquee text effect with simple HTML tags along with CSS.

Recommended: 50+ CSS3 Transitions and Animations for Blogger

The Marquee effects look similar to the breaking news ticker. But in the marquee, we have used simple HTML tag elements instead of Jquery. Marquee text effect makes the text to scroll Up, Down, Right, Left, Angle Up, Angle Down, etc. automatically. You should not use it too many times to your web pages or in your blog posts/pages as it makes your website non-professional. Use this only wherever you need.

How to Use Marquee Text Effects

1. Just copy your desired marquee code
2. Paste it into your Web page (where you want to show it)
3. However, if you want to show this effect in your blog post, you need to click Create New Post/Page
4. Switch to HTML and paste the code.
5. Finally, click Compose button and you are on the go

1. Left to Right Continuous Scrolling Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<br>
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee><br>
<br></div>

Result:

Your scrolling text goes here

2. Text Bouncing Back and Forth

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<br>
<marquee behavior="alternate">Your bouncing text goes here</marquee><br>
<br></div>

Result:

Your bouncing text goes here

3. Upward Text Scrolling Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<br>
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee><br>
<br></div>

Result:

Your upward scrolling text goes here

4. Multi Text Scrolling Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<br>
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee><br>
<br>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee><br>
<br>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee><br>
<br></div>

Result:

Slow scroll speed



Medium scroll speed



Fast scroll speed

5. Marquee Image Scrolling Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<br>
<marquee behavior="scroll" direction="left"><img alt="smile" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCjfzqk3YbkodYlnm4MGoDdPxs7E_s03yhBxNASo63b9HATYEG0VpFsye9lqumIsX3pJ7X-DgGx_yYy0f-fUSus_5d25axAVf0jrrHBjiMwzpCPnGwC8XrDmcU_ljg2DpSasgiMo5fcjB4/s320/knigulper-marquee-image-effect.gif" width="100"></marquee><br>
<br></div>

Result:

6. Marquee Image Effect With Text

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee behavior="scroll" direction="left"><img alt="smile" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCjfzqk3YbkodYlnm4MGoDdPxs7E_s03yhBxNASo63b9HATYEG0VpFsye9lqumIsX3pJ7X-DgGx_yYy0f-fUSus_5d25axAVf0jrrHBjiMwzpCPnGwC8XrDmcU_ljg2DpSasgiMo5fcjB4/s320/knigulper-marquee-image-effect.gif" width="100"><br>
Sample text under a <a href="http://www.knigulper.com/">Marquee image</a>.</marquee><br>
<br></div>

Result:

Sample text under a Marquee image.

7. Right to Left Marquee Text Scrolling Effect

Source Code:
<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="left">Right to Left</marquee></div>
Result:

Right to Left

8. Left to Right Marquee Text Scrolling Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="right">Left to Right</marquee></div>

Result:

Left to Right

9. Back and Forth Marquee Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee behavior="alternate">Back and Forth</marquee></div>

Result:

Back and Forth

10. Marquee Upward Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="up" height="100">Upward Text Effect</marquee></div>

Result:

Upward Text Effect

11. Marquee Downward Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="down" height="100">Down Down Down</marquee></div>

Result:

Down Down Down

12. Marquee Up and Down Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee behavior="alternate" direction="up" height="100">Up and Down</marquee></div>

Result:

Up and Down

13. Down Angle Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee><marquee direction="down" style="height: 100px;">Angle Down</marquee></marquee></div>

Result:

Angle Down

14. Angle Up Back and Forth Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="up" height="100"><marquee behavior="alternate">Angle Up Back and Forth</marquee></marquee></div>

Result:

Angle Up Back and Forth

15. Bounce Around Back and Forth Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee behavior="alternate" direction="down" height="150"><marquee behavior="alternate">Bounce Around Back and Forth</marquee></marquee></div>

Result:

Bounce Around Back and Forth

16. Multiple Lines Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="right">Multiple Lines<br>
Multiple Lines<br>
Multiple Lines<br>
Multiple Lines</marquee></div>

Result:

Multiple Lines

Multiple Lines

Multiple Lines

Multiple Lines

17. Marquee Text Effect With Background Color

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee bgcolor="#ff0000" style="color: white;">Colored Background</marquee></div>

Result:

Colored Background

18. Right to Left Blinking Text Effect

Supported Browsers (Firefox and Netscape)
Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="left"><blink>Right to Left Blinking</blink></marquee></div>

Result:

Right to Left Blinking

19. Opposing Marquee Text Effect

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="left">Right to Left</marquee><marquee direction="right">Left to Right</marquee></div>

Result:

Right to LeftLeft to Right

20. Marquee Changing Text Size

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="left" style="font-size: 32px;">Change Text Size</marquee></div>

Result:

Change Text Size

21. Marquee Width Changing

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee direction="left" width="50%">Change Width</marquee></div>

Result:

Change Width

22. Adding Hyperlinks In Marquee

Source Code:

<div style="-moz-background-inline-policy: continuous; background: none repeat scroll right top rgb(255, 255, 255); border: 1px inset; padding: 5px;">
<marquee align="middle" behavior="scroll" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="4" style="color: #99ffff;"><a href="http://www.knigulper.com/">Your Link</a>  <a href="http://www.knigulper.com/">Knigulper - Blogging tips, tutorials and widgets</a></marquee></div>

Result:

Your Link Knigulper - Blogging tips, tutorials and widgets

Looks you enjoyed the tutorial. Share this with your friends to make this community wider.

Share this post