Hello, buddy, I hope you are doing well, in this blog we will learn about how we can marquee images, or text in an infinite loop and not have a gap between them.
I will guide you with a simple example of how we can do a marquee over an image by using CSS animation, as we know if we use the default marquee tag it won’t work in our case, and if you are reading this blog which means you already tried with the marquee tag.
We will also add the CSS to stop the marquee image when you hover on it.
Below is the CSS code for marquee infinite loop css
<style>
.marquee {
width: 100%;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
border: 1px solid blue;
}
.marquee-content {
display: inline-block;
margin-top: 5px;
animation: marquee 45s linear infinite;
}
.item-collection-1 {
position: relative;
left: 0%;
animation: swap 45s linear infinite;
}
@keyframes swap {
0%, 50% {
left: 0%;
}
50.01%,
100% {
left: 100%;
}
}
.marquee-content:hover {
animation-play-state: paused
}
/* Transition */
@keyframes marquee {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-100%)
}
}
</style>Below is our HTML Code for infinte marquee
<div class="marquee">
<div class="marquee-content">
<span class="item-collection-1">
<span><img src="https://www.patnamarathon.co.in/wp-content/uploads/2022/01/MaxPixel.net-Aircraft-War-Military-Defense-Helicopter-Fly-Army-3078482c-1.jpg" ></span>
<span><img src="https://www.patnamarathon.co.in/wp-content/uploads/2022/01/MaxPixel.net-Aircraft-War-Military-Defense-Helicopter-Fly-Army-3078482c-1.jpg" ></span>
</span>
<span class="item-collection-2">
<span><img src="https://www.patnamarathon.co.in/wp-content/uploads/2022/01/MaxPixel.net-Aircraft-War-Military-Defense-Helicopter-Fly-Army-3078482c-1.jpg" ></span>
<span><img src="https://www.patnamarathon.co.in/wp-content/uploads/2022/01/MaxPixel.net-Aircraft-War-Military-Defense-Helicopter-Fly-Army-3078482c-1.jpg" ></span>
</span>
</div>
</div>Now let’s combine both of them and see the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.marquee {
width: 100%;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
border: 1px solid blue;
}
.marquee-content {
display: inline-block;
margin-top: 5px;
animation: marquee 45s linear infinite;
}
.item-collection-1 {
position: relative;
left: 0%;
animation: swap 45s linear infinite;
}
@keyframes swap {
0%, 50% {
left: 0%;
}
50.01%,
100% {
left: 100%;
}
}
.marquee-content:hover {
animation-play-state: paused
}
/* Transition */
@keyframes marquee {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-100%)
}
}</style>
</head>
<body>
<div class="marquee">
<div class="marquee-content">
<span class="item-collection-1">
<span><img src="https://www.patnamarathon.co.in/wp-content/uploads/2022/01/MaxPixel.net-Aircraft-War-Military-Defense-Helicopter-Fly-Army-3078482c-1.jpg" ></span>
<span><img src="https://www.patnamarathon.co.in/wp-content/uploads/2022/01/MaxPixel.net-Aircraft-War-Military-Defense-Helicopter-Fly-Army-3078482c-1.jpg" ></span>
</span>
<span class="item-collection-2">
<span><img src="https://www.patnamarathon.co.in/wp-content/uploads/2022/01/MaxPixel.net-Aircraft-War-Military-Defense-Helicopter-Fly-Army-3078482c-1.jpg" ></span>
<span><img src="https://www.patnamarathon.co.in/wp-content/uploads/2022/01/MaxPixel.net-Aircraft-War-Military-Defense-Helicopter-Fly-Army-3078482c-1.jpg" ></span>
</span>
</div>
</div>
</body>
</html>
