In this guide, we are going to explore the marquee effect using CSS.
What do you mean by Marquee?
Marquee is employed to generate horizontal or vertical scrolling impact, animation impact in text and images on web pages. For instance: News headlines moving on TV. The <marquee> tag of HTML is not commonly utilized or conforming to standards. Thus, to produce a Marquee effect, you need to combine the CSS animation property with the @keyframes rule.
Here are some instances demonstrating the Marquee Effect implemented through CSS.
Example 1:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of Marquee Effect using CSS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
body {
background: radial-gradient(600px at 50% 50%, #fff 20%, #000 100%);
}
h1 {
text-align: center;
font-family: "Oswald", Helvetica, sans-serif;
font-size: 50px;
transform: skewY(-1deg);
letter-spacing: 2px;
word-spacing: -8px;
color: tomato;
}
h2 {
text-align: center;
color: #c0b283;
font-size: 4em;
font-weight: 700;
font-family: Garamond;
transform: skewY(-1deg);
letter-spacing: 2px;
word-spacing: -8px;
color: tomato;
}
html,
body {
font-family: "Open Sans", sans-serif;
background-color: #f3f3f3;
}
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing: border-box;
}
.ticker {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 50px;
margin: 0 auto;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 20;
}
.news {
width: 100%;
background: #342c2c;
}
.news-title {
width: 180px;
text-align: center;
background: #c81c1c;
position: absolute;
z-index: 10;
height: 50px;
}
.news-title:after {
position: absolute;
content: " ";
right: -39px;
border-left: 20px solid #c81c1c;
border-top: 28px solid transparent;
border-right: 20px solid transparent;
border-bottom: 21px solid transparent;
top: 0px;
}
.news-title h5 {
font-size: 17px;
margin: 8% 0;
color: #542929;
}
.news marquee {
font-size: 18px;
margin-top: 15px;
}
.news-content p {
margin-right: 41px;
display: inline;
color: #ddca7e;
}
@-webkit-keyframes .news-content {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
@keyframes .news-content {
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>
<body>
<h1> Example </h1>
<h2> Marquee Effect using CSS </h2>
<div class = " ">
<div class = "ticker">
<div class = "news-title">
<h5> Breaking News </h5>
</div>
<div class = "news">
<marquee class = "news-content">
<p> The College will remain close till the further notice of CM. </p>
</Marquee>
</div>
</div>
</div>
</body>
</html>
Explanation:
In the above example, we created an example of marquee effect using CSS. In this we scroll news from left to right by using following code. The code moved in horizontal direction starting form left like a TV news headline.
@-webkit-keyframes .news-content {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
@keyframes .news-content {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
Output:
Following is the output of this example.
Example 2:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of Marquee Effect using CSS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<style>
.ticker {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 50px;
margin: 0 auto;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 20;
}
@import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
text-align: center;
font-family: "Oswald", Helvetica, sans-serif;
font-size: 50px;
transform: skewY(-1deg);
letter-spacing: 2px;
word-spacing: -8px;
color: tomato;
}
h2 {
text-align: center;
color: #c0b283;
font-size: 4em;
font-weight: 700;
font-family: Garamond;
transform: skewY(-1deg);
letter-spacing: 2px;
word-spacing: -8px;
color: tomato;
}
html,
body {
font-family: "Open Sans", sans-serif;
background-color: #f3f3f3;
}
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing: border-box;
}
body {
margin: 1em;
min-height: 100vh;
display: grid;
align-content: center;
overflow: hidden;
width: 100%;
font-family: "Corben", system-ui, sans-serif;
font-size: 1.5rem;
line-height: 1.5;
}
.Marquee {
width: 1260px;
margin: auto;
duration: 60s;
display: flex;
overflow: hidden;
user-select: none;
}
.Marqueeuegrp {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: margin-around;
min-width: 100%;
animation: scroll var(--duration) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.Marqueeuegrp {
animation-play-state: paused;
}
}
.Marqueeuegrp img {
max-width: clamp(10rem, 1rem + 28vmin, 20rem);
aspect-ratio: 1;
object-fit: cover;
border-radius: 1rem;
}
.Marqueeuegrp p {
background-image: linear-gradient(
75deg,
hsl(240deg 70% 49%) 0%,
hsl(253deg 70% 49%) 11%,
hsl(267deg 70% 49%) 22%,
hsl(280deg 71% 48%) 33%,
hsl(293deg 71% 48%) 44%,
hsl(307deg 71% 48%) 56%,
hsl(320deg 71% 48%) 67%,
hsl(333deg 72% 48%) 78%,
hsl(347deg 72% 48%) 89%,
hsl(0deg 73% 47%) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.Marquee--borders {
border-block: 3px solid dodgerblue;
padding-block: 0.75rem;
}
.Marquee--reverse .Marqueeuegrp {
animation-direction: reverse;
animation-delay: calc(var(--duration) / -2);
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% - var(--padding)));
}
}
</style>
<body>
<h1> Example </h1>
<h2> Marquee Effect Using CSS </h2>
<div class="Marquee">
<div class="Marqueeuegrp">
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
</div>
</div>
<div class="Marquee Marquee--reverse">
<div class="Marqueeuegrp">
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
</div>
<div aria-hidden="true" class="Marqueeuegrp">
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
<img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image' alt=''>
</div>
</div>
</body>
</html>
Explanation:
In the previous illustration, we demonstrated a sample of a marquee effect implemented with CSS. This effect involves shifting the images horizontally, from the left to the right.
Output:
Following is the output of this example.
Example 3:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of Marquee Effect using CSS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
text-align: center;
font-family: "Oswald", Helvetica, sans-serif;
font-size: 50px;
transform: skewY(-1deg);
letter-spacing: 2px;
word-spacing: -8px;
color: tomato;
}
h2 {
text-align: center;
color: #c0b283;
font-size: 4em;
font-weight: 700;
font-family: Garamond;
transform: skewY(-1deg);
letter-spacing: 2px;
word-spacing: -8px;
color: tomato;
}
html,
body {
font-family: "Open Sans", sans-serif;
background-color: #f3f3f3;
}
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing: border-box;
}
body {
--margin: 2rem;
display: grid;
align-content: center;
overflow: hidden;
padding: var(--margin);
width: 100%;
font-size: 1.2rem;
font-family: monomargin;
background-color: #070707;
color: yellow;
}
.Marquee {
margin: 0 auto;
width: 600px; // or 100% inside a container
height: 30px;
white-margin: nowrap;
overflow: hidden;
box-sizing: border-box;
position: relative;
&:before, &:after {
position: absolute;
top: 0;
width: 50px;
height: 30px;
content: "";
z-index: 1;
}
&:before {
left: 0;
background: linear-gradient(to right, white 5%, transparent 100%);
}
&:after {
right: 0;
background: linear-gradient(to left, white 5%, transparent 100%);
}
}
.Marqcont {
width: 300% !important;
display: flex;
line-height: 30px;
animation: Marquee 10s linear infinite forwards;
&:hover {
animation-play-state: paused;
}
}
.li {
float: left;
width: 80%;
padding: 1%;
margin: 1% 10%;
height: 20px;
border-radius: 0.5em;
box-shadow: 0 0.1em 0.5em;
}
.list-inline {
display: flex;
justify-content: margin-around;
width: 33.33%;
list-style: none;
padding: 0;
margin: 0;
}
@keyframes Marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-66.6%); }
}
</style>
<body>
<h1> Example </h1>
<h2> Marquee Effect Using CSS </h2>
<div class="Marquee">
<div class="Marqcont">
<ul class="list-inline">
<li> Menu 1</li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li> Menu 4 </li>
<li> Menu 5 </li>
</ul>
<ul class="list-inline">
<li> Menu 1</li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li> Menu 4 </li>
<li> Menu 5 </li>
</ul>
<ul class = "list-inline">
<li> Menu 1</li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li> Menu 4 </li>
<li> Menu 5 </li>
</ul>
</div>
</div>
</body>
</html>
Explanation:
In the previously mentioned example, we demonstrated a marquee effect implementation using CSS. Here, the menu items shift horizontally.
Output:
Following is the output of this example.