fadhilsaheer · October 3, 2024 10:44
diff --git a/infinite-marquee.html b/infinite-marquee.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seamless Infinite Marquee</title>
    <style>
        .marquee-wrap {
            width: 100%;
            overflow: hidden;
            position: relative;
            background: #f0f0f0;
        }

        .marquee {
            display: flex;
            width: fit-content;
            animation: marquee 30s linear infinite;
        }

        .marquee-content {
            display: flex;
            padding-right: 50px; /* Ensure space between content sets */
        }

        .marquee span {
            flex-shrink: 0; /* Prevent text from shrinking */
            font-family: Arial, sans-serif;
            font-size: 24px;
            padding: 10px 20px;
            white-space: nowrap; /* Prevent text wrapping */
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .marquee-wrap:hover .marquee {
            animation-play-state: paused;
        }
    </style>
 </head>
 <body>
    <div class="marquee-wrap">
        <div class="marquee">
            <div class="marquee-content">
                <span>This is a smooth infinite marquee •</span>
                <span>No lag or stuttering here •</span>
                <span>Just seamless scrolling text •</span>
            </div>
            <div class="marquee-content">
                <span>This is a smooth infinite marquee •</span>
                <span>No lag or stuttering here •</span>
                <span>Just seamless scrolling text •</span>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const marquee = document.querySelector('.marquee');
        const content = document.querySelector('.marquee-content');
        
        function adjustAnimation() {
            const contentWidth = content.offsetWidth;
            const duration = contentWidth / 50; // Adjust 50 to change speed
            marquee.style.animationDuration = `${duration}s`;
        }
        
        // Ensure content is duplicated enough times
        function ensureContent() {
            const screenWidth = window.innerWidth;
            const contentSets = Math.ceil((screenWidth * 2) / content.offsetWidth);
            
            // Clear existing duplicates
            marquee.innerHTML = '';
            
            // Add original content
            marquee.appendChild(content);
            
            // Add duplicates
            for (let i = 1; i < contentSets; i++) {
                marquee.appendChild(content.cloneNode(true));
            }
        }
        
        ensureContent();
        adjustAnimation();
        
        // Adjust on window resize
        window.addEventListener('resize', () => {
            ensureContent();
            adjustAnimation();
        });
    });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Seamless Infinite Marquee</title>
	<style>
	.marquee-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
	background: #f0f0f0;
	}

	.marquee {
	display: flex;
	width: fit-content;
	animation: marquee 30s linear infinite;
	}

	.marquee-content {
	display: flex;
	padding-right: 50px; /* Ensure space between content sets */
	}

	.marquee span {
	flex-shrink: 0; /* Prevent text from shrinking */
	font-family: Arial, sans-serif;
	font-size: 24px;
	padding: 10px 20px;
	white-space: nowrap; /* Prevent text wrapping */
	}

	@keyframes marquee {
	0% {
	transform: translateX(0);
	}
	100% {
	transform: translateX(-50%);
	}
	}

	.marquee-wrap:hover .marquee {
	animation-play-state: paused;
	}
	</style>
	</head>
	<body>
	<div class="marquee-wrap">
	<div class="marquee">
	<div class="marquee-content">
	<span>This is a smooth infinite marquee •</span>
	<span>No lag or stuttering here •</span>
	<span>Just seamless scrolling text •</span>
	</div>
	<div class="marquee-content">
	<span>This is a smooth infinite marquee •</span>
	<span>No lag or stuttering here •</span>
	<span>Just seamless scrolling text •</span>
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const marquee = document.querySelector('.marquee');
	const content = document.querySelector('.marquee-content');

	function adjustAnimation() {
	const contentWidth = content.offsetWidth;
	const duration = contentWidth / 50; // Adjust 50 to change speed
	marquee.style.animationDuration = `${duration}s`;
	}

	// Ensure content is duplicated enough times
	function ensureContent() {
	const screenWidth = window.innerWidth;
	const contentSets = Math.ceil((screenWidth * 2) / content.offsetWidth);

	// Clear existing duplicates
	marquee.innerHTML = '';

	// Add original content
	marquee.appendChild(content);

	// Add duplicates
	for (let i = 1; i < contentSets; i++) {
	marquee.appendChild(content.cloneNode(true));
	}
	}

	ensureContent();
	adjustAnimation();

	// Adjust on window resize
	window.addEventListener('resize', () => {
	ensureContent();
	adjustAnimation();
	});
	});
	</script>
	</body>
	</html>