Sleek Cards Infinite Scroll

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sleek Cards Infinite Scroll</title>
    <style>
        body {
            font-family: 'Helvetica Neue', sans-serif;
            background: #333;
            color: #fff;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 90%;
            margin: 0 auto;
            overflow: hidden;
            padding: 50px 0;
        }
        .item {
            background: #444;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            align-items: center;
            position: relative;
        }
        .item:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
        }
        .item-icon {
            font-size: 2em;
            margin-right: 20px;
            color: #00ffcc;
        }
        .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>
                <p>This is a description for item 1.</p>
            </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>
                    <p>This is a description for item ${index}.</p>
                </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>

Sleek Cards Infinite Scroll - MeggiTools