Marquee Effect using CSS

In this article, we will understand the marquee effect with the help of CSS.

What do you mean by Marquee?

Marquee is used to create horizontal or vertical scrolling effect, animation effect in text and images for web pages. For Example: News headlines moves in TV. The <marquee> element of HTML is not widely used or a standard-compliant. So for creating a Marquee effect, you have to use the CSS animation property together with the @keyframes rule.

Following are the examples of Marquee Effect using CSS.

Example 1:

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

<! 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://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
  </div>
</div>
<div class="Marquee Marquee--reverse">
  <div class="Marqueeuegrp">
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
  </div>
  <div aria-hidden="true" class="Marqueeuegrp">
<img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
  </div>
</div>
</body>
</html>

Explanation:

In the above example, we created an example of marquee effect using CSS. In this we move the images from left to right.

Output:

Following is the output of this example.

Example 3:

<! 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 above example, we created an example of marquee effect using CSS. In this menus moves in horizontal direction.

Output:

Following is the output of this example.