How to make marquee tag responsive

How to make the marquee tag responsive?

Marquee is one of the most important tags in HTML it is supported scrollable texts and images on the web page. In this tutorial, you will learn about the Marquee tag with responsiveness and its different attributes for developing a well-groomed static website.

 

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,500;0,700;0,800;0,900;1,600;1,700;1,800&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="marquee-row">
  
<div class="marquee-block marquee1">
  <ul class="marquee-item-list">
    <li>Web Design</li>
    <li>App Design</li>
    <li>Graphic Design</li>
  </ul>  
</div>
  
  <div class="marquee-block marquee2">
  <ul class="marquee-item-list">
    <li>Web Design</li>
    <li>App Design</li>
    <li>Graphic Design</li>
  </ul>  
</div>
  
</div>

<!--https://www.separateweb.com/-->

 

.marquee-row{
  width: 100%;
  overflow-x: hidden;
}
.marquee-block{
  position:relative;
  display: flex;
  width: 100%;  
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  justify-content: space-between;
}
.marquee-item-list{
 display: inline-flex;
}
.marquee-item-list li{
width: 100%;
list-style: none;
padding-right: 30px;
font-size: 40px;
white-space: nowrap
}
.marquee1{animation-name: marquee1;}
.marquee2{animation-name: marquee2;}
@keyframes marquee1 {
  0% { left: 0; }
  100% {left: -100%;}
}
@keyframes marquee2 {
  100% { left: 0; }
  0% {left: -100%;}
}
var elements = $('ul.marquee-item-list li').length;
for(var i=0;i < elements; i++){
 $(".marquee-item-list").clone().prependTo( ".marquee-block" );
};
var liEle = [];
var liEle = $(".marquee-item-list li");

 

See the Pen
Infinite Marquee responsive no gap
by Rajesh Doot (@rajeshdoot)
on CodePen.

Leave a Reply

Your email address will not be published.