Vibrant Circles Infinite Scroll

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vibrant Circles Infinite Scroll</title>
    <style>
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background: radial-gradient(circle, #ff9a9e 0%, #fad0c4 100%);
            color: #fff;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            overflow: hidden;
            padding: 50px 0;
        }
        .item {
            background: #fff;
            color: #333;
            margin: 20px 0;
            padding: 20px;
            border-radius: 50%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            width: 150px;
            height: 150px;
            margin: 20px auto;
        }
        .item:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        .loading {
            text-align: center;
            padding: 20px;
            font-size: 1.5em;
        }
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        .item {
            animation: fadeIn 1s ease-in;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <div class="item">
            <span class="item-icon">🌈</span>
            <div class="item-content">
                <h2>Item 1</h2>
            </div>
        </div>
    </div>
    <div class="loading" id="loading">
        <span class="item-icon">🔄</span> Loading more items...
    </div>
    <script>
        const container = document.getElementById('container');
        const loading = document.getElementById('loading');
        let itemCount = 1;
        let loadingItems = false;
        const createItem = (index) => {
            const item = document.createElement('div');
            item.classList.add('item');
            item.innerHTML = `
                <span class="item-icon">🌈</span>
                <div class="item-content">
                    <h2>Item ${index}</h2>
                </div>
            `;
            return item;
        };
        const loadItems = () => {
            loadingItems = true;
            loading.style.display = 'block';
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    itemCount++;
                    container.appendChild(createItem(itemCount));
                }
                loading.style.display = 'none';
                loadingItems = false;
            }, 1500);
        };
        window.addEventListener('scroll', () => {
            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100 && !loadingItems) {
                loadItems();
            }
        });
        loadItems(); // Initial load
    </script>
</body>
</html>

Vibrant Circles Infinite Scroll - MeggiTools