Infinite Scroll Animation

https://www.youtube.com/watch?v=iLmBy-HKIAw

<marquee>: The Marquee element - HTML | MDN

• <marquee> Tag: The <marquee> HTML element is a deprecated element in modern web standards. It was used to create scrolling text or images, but its use is discouraged due to accessibility and control issues. Modern web development typically achieves similar effects using CSS animations or JavaScript.

index.html

<!DOCTYPE html>
<html>
	<body>
		<h1 style="text-align: center">Infinite Scroll Animation</h1>
		
		<div class="scroller" data-direction="left">
			<ul class="tag-list scroller__inner">
				<li>HTML</li>
				<li>CSS</li>
				<li>JS</li>
				<li>SSG</li>
				<li>WebDev</li>
				<li>Animation</li>
				<li>UI/UX</li>
			</ul>
		</div>
		
		<div class="scroller" data-direction="right">
			<ul class="tag-list">
				<li>HTML</li>
				<li>CSS</li>
				<li>JS</li>
				<li>SSG</li>
				<li>WebDev</li>
				<li>Animation</li>
				<li>UI/UX</li>
			</ul>
		</div>

	</body>
</html>

style.css

.tag-list {
	margin: 0;
	padding-inline: 0;
	list-style: none;
}

.tag-list li {
	padding: 1rem;
	background: var(--clr-primary-400);
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-400);
}

.scroller {
	max-width: 400px;
	overflow: hidden;
	/* outline: 3px solid; */
}

.scroller[data-animated="true"]{
	overflow: hidden;
	/* -webkit mask for chromium browsers */
	-webkit-mask: linear-gradient(90 deg, transparent, white 20%, white 80%, transparent);
	mask: linear-gradient(90 deg, transparent, white 20%, white 80%, transparent);
}

.scroller__inner {
	width: max-content;
	padding-block: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.scroller[data-animated="true"] .scroller__inner {
	flex-wrap: nowrap;
	animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
	--_animation-direction: reverse;
}

.scroller[data-direction="left"] {
	--_animation-direction: forwards;
}

@keyframes scroll {
	to {
		transform: translate(calc(-50% - 0.5rem));
	}

}

main.js

const scrollers = document.querySelectorAll(".scroller");

if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches){
	addAnimation();
}

function addAnimation() {
	scrollers.forEach(scroller => {
		scroller.setAttribute('data-animated', true);
		
		const scrollerInner scroller.querySelector('.scroller__inner');
		const scrollerContent = Array.from(scrollerInner.children);
		
		scrollerContent.forEach(item => {
			const duplicatedItem = item.cloneNode(true);
			duplicatedItem.setAttribute('aria-hidden', true);
			scrollerInner.appendChild(duplicatedItem);
		});
		
		
		
	});
}