How To Add Moving Text In HTML ?
.jpg "Add Moving Text In HTML ?")
Live Demo 1
<marquee>This is moving text Moving Right to Left</marquee>
Live Demo 2
<marquee style="background: yellow; border: 1px solid #ccc; color: black; font-size: 18px; font-weight: 600; padding: 4px;"> This Is Moving Text with Background Color </marquee>
Live Demo 3
<marquee bgcolor="#FFFE00" scrollamount="6" style="color:black;">This Is Scrolling Text with scrollamount="6" </marquee>
Live Demo 4
<marquee bgcolor="#FFFE00" style="color:black" direction="up">This Is Moving Text with Up Direction </marquee>
Live Demo 5
<marquee bgcolor="#FFFE00" behavior="alternate" style="color:black;">This Is Moving Text with Alternate Behavior</marquee>
Live Demo 6
<marquee bgcolor="FFFE00" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="6" style="font-size: large;"><span style="color: black;">Welcome To This Website</span></marquee>
Live Demo 7
<marquee bgcolor="FFFE00" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="7"><span style="font-size: large;"><span style="color: black;">Welcome To This</span><a href="ADD URL" target="_blank"><span style="color: red;"> Website</span></a></span></marquee>
Live Demo 8
<marquee>
<img height='150px' src='IMAGE URL' width='200px'/>
<img height='150px' src='IMAGE URL' width='200px'/>
</marquee>
Live Demo 9 (Simple)
<marquee bgcolor="#e9f7ff" direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" style="padding: 20px; border: 1px solid #ccc; border-radius: 6px;"><span style="font-size: 18px;"><a href="ADD URL 1"><span style="color: black;">ADD TEXT 1</span></a><br />
<a href="ADD URL 2"><span style="color: black;">ADD TEXT 2</span></a><br />
<a href="ADD URL 3"><span style="color: black;">ADD TEXT 3</span></a>
</span></marquee>
Live Demo 9 (Advance)
<style>
marquee {
background-color: #e9f7ff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 6px;
width: 100%;
height: 100%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
marquee span {
font-size: 18px;
font-family: system-ui;
display: block;
}
marquee a {
text-decoration: none;
font-weight: 500;
color: black;
transition: color 0.3s ease;
}
.pEnt {
line-height: 30px;
}
marquee a:hover {
color: red;
}
</style>
<body>
<marquee onmouseout="this.start()" direction= "up" onmouseover="this.stop()" scrollamount="3">
<span>
<a href="ADD URL 1">ADD TEXT 1</a><br />
<a href="ADD URL 2">ADD TEXT 2</a><br />
<a href="ADD URL 3">ADD TEXT 3</a><br />
<a href="ADD URL 4">ADD TEXT 4</a>
</span>
</marquee>
</body>
Live Demo 10 (Simple)
<marquee bgcolor="#e9f7ff" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" style="padding: 0px; border: 0px solid #ccc;"><span style="font-size: 18px; font-weight: 500;">
<a href="ADD URL 1"><span style="color: black;">ADD TEXT 1</span></a> <span style="color: #cc0000;"><b>| </b></span>
<a href="ADD URL 2"><span style="color: black;">ADD TEXT 2</span></a> <span style="color: #990000;"><b>| </b></span>
<a href="ADD URL 3"><span style="color: black;">ADD TEXT 3</span></a>
</span></marquee>
Live Demo 10 (Advance)
<style>
.marquee-link {
color: black;
}
.marquee-link:hover {
text-decoration: none;
color: red;
}
</style>
<marquee bgcolor="#e9f7ff" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" style="padding: 0px; border: 0px solid #ccc;"><span style="font-size: 18px; font-weight: 500;">
<a href="ADD URL 1" class="marquee-link">ADD TEXT 1</a> <span style="color: #cc0000;"><b>| </b></span>
<a href="ADD URL 2" class="marquee-link">ADD TEXT 2</a> <span style="color: #cc0000;"><b>| </b></span>
<a href="ADD URL 3" class="marquee-link">ADD TEXT 3</a>
</span>
</marquee>
.jpg)