How to Add the Marquee Effect without Using the Marquee Tag (with CSS, JavaScript and jQuery)
The <marquee> tag is not in use anymore. It is an old and non-standard HTML element that was used to make the text or image to scroll up, down, left or right on the web page automatically.
Nowadays, people don't like using it at all. It is considered that there is no need and no benefit to having continually scrolling text. No one would like to read the text, which doesn't stay quiet.
However, if you need to add the marquee effect find some alternative ways of doing it below with CSS, JavaScript and jQuery.
Make the marquee effect with CSS animations (vertically and horizontally)
Use the CSS animation, transform properties with the @keyframes at-rule to have the marquee effect without using the <marquee> tag.
For horizontally scrolling the text, use the "marquee 10s linear infinite;" value for the animation property (change the seconds according to your needs). Then, define the animation to move it:
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}Now, let’s see how the scrolling of a text will look from right to left.
Example of creating a horizontally scrolling text without the <marquee> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #1c87c9;
color: #fff;
padding: 5px;
}
p {
-moz-animation: marquee 10s linear infinite;
-webkit-animation: marquee 10s linear infinite;
animation: marquee 10s linear infinite;
}
@-moz-keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@-webkit-keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes marquee {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div>
<p>This is a horizontally scrolling text without a marquee tag.</p>
</div>
</body>
</html>Result
This is a horizontally scrolling text without a marquee tag.
Then, let’s make the text scroll vertically. This time we need to change the values of the transform property like this:
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -100%);
}
}Our bottom to top scrolling text will be like the following.
Example of creating a vertically scrolling text without the <marquee> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #1c87c9;
color: #fff;
text-align: center;
}
p {
padding-top: 100%;
-moz-animation: marquee 5s linear infinite;
-webkit-animation: marquee 5s linear infinite;
animation: marquee 5s linear infinite;
}
@-moz-keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -100%);
}
}
@-webkit-keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -100%);
}
}
@keyframes marquee {
0% {
-moz-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
}
</style>
</head>
<body>
<div>
<p>This is a vertically scrolling text without a marquee tag.</p>
</div>
</body>
</html>You can use the :hover selector with the animation-play-state property to stop the scrolling of the text when hovered. Set the "paused" value for the animation-play-state .
:hover {
animation-play-state: paused;
}Example of creating a horizontally scrolling text with a hovering effect:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.marquee {
margin: 0 auto;
width: 600px;
height: 30px;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.marquee:before,
.marquee:after {
position: absolute;
top: 0;
width: 50px;
height: 30px;
content: "";
z-index: 1;
}
.marquee:before {
left: 0;
background: linear-gradient(to right, #ccc 10%, transparent 80%);
}
.marquee:after {
right: 0;
background: linear-gradient(to left, #ccc 10%, transparent 80%);
}
.marquee__content {
width: 300%;
display: flex;
line-height: 30px;
animation: marquee 10s linear infinite forwards;
}
.marquee__content:hover {
animation-play-state: paused;
}
.list-inline {
display: flex;
justify-content: space-around;
width: 33.33%;
/* reset list */
list-style: none;
padding: 0;
margin: 0;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-66.6%);
}
}
</style>
</head>
<body>
<div class="marquee">
<div class="marquee__content">
<ul class="list-inline">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
<ul class="list-inline">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
<ul class="list-inline">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</div>
</div>
</body>
</html>Make the marquee effect with JavaScript.
Here vanilla JS is used.
Example of creating a marquee effect with JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
font-family: sans-serif;
font-weight: 700;
height: 600vh;
background: #d66d75;
background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 50%);
}
.marquee {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.marquee .inner {
position: relative;
width: 100%;
display: flex;
color: white;
font-size: 8rem;
}
.marquee .inner > * {
white-space: nowrap;
padding: 0 4rem;
}
</style>
</head>
<body>
<div class="marquee">
<div class="inner">
<p>Hello world of humans.</p>
</div>
</div>
<script>
function handleMarquee() {
const marquee = document.querySelectorAll('.marquee');
let speed = 4;
let lastScrollPos = 0;
let timer;
marquee.forEach(function(el) {
const container = el.querySelector('.inner');
const content = el.querySelector('.inner > *');
//Get total width
const elWidth = content.offsetWidth;
//Duplicate content
let clone = content.cloneNode(true);
container.appendChild(clone);
let progress = 1;
function loop() {
progress = progress - speed;
if(progress <= elWidth * -1) {
progress = 0;
}
container.style.transform = 'translateX(' + progress + 'px)';
container.style.transform += 'skewX(' + speed * 0.4 + 'deg)';
window.requestAnimationFrame(loop);
}
loop();
});
window.addEventListener('scroll', function() {
const maxScrollValue = 12;
const newScrollPos = window.scrollY;
let scrollValue = newScrollPos - lastScrollPos;
if(scrollValue > maxScrollValue) scrollValue = maxScrollValue;
else if(scrollValue < -maxScrollValue) scrollValue = -maxScrollValue;
speed = scrollValue;
clearTimeout(timer);
timer = setTimeout(handleSpeedClear, 10);
});
function handleSpeedClear() {
speed = 4;
}
};
handleMarquee();
</script>
</body>
</html>Make the text scrolling plugin with jQuery
Using jQuery is another alternative way of having the effect of a marquee. Let’s learn how to use it step by step.
- Include jQuery library and Marquee.js in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>- Include jQuery easing plugin for easing options:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>- Write the Markup:
<div class="marquee">Some text goes here.</div>- Call the plugin:
<script>
$(function(){
$('.marquee').marquee();
});
</script>- Define these options if you want to rewrite the default functionalities:
$(function(){
$('.marquee').marquee({
//If you wish to always animate using jQuery
allowCss3Support: true,
//works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing: 'linear',
//requires jQuery easing plugin. Default is 'linear'
easing: 'linear',
//pause time before the next animation turn in milliseconds
delayBeforeStart: 1000,
//'left', 'right', 'up' or 'down'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: false,
//speed in milliseconds of the marquee in milliseconds
duration: 5000,
//gap in pixels between the tickers
gap: 20,
//on cycle pause the marquee
pauseOnCycle: false,
//on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: false,
//the marquee is visible initially positioned next to the border towards it will be moving
startVisible: false
});
});Now let’s see how it will look like.
Example of creating a text scrolling plugin with jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src= "https://code.jquery.com/jquery-3.5.0.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
</head>
<body>
<div class="marquee">Some text goes here.</div>
<script>
$(function() {
$('.marquee')
.marquee({
//If you wish to always animate using jQuery
allowCss3Support: true
, //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing: 'linear'
, //requires jQuery easing plugin. Default is 'linear'
easing: 'linear'
, //pause time before the next animation turn in milliseconds
delayBeforeStart: 1000
, //'left', 'right', 'up' or 'down'
direction: 'left'
, //true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: false
, //speed in milliseconds of the marquee in milliseconds
duration: 5000
, //gap in pixels between the tickers
gap: 20
, //on cycle pause the marquee
pauseOnCycle: false
, //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: false
, //the marquee is visible initially positioned next to the border towards it will be moving
startVisible: false
});
});
</script>
</body>
</html>