ساخت نوار خبری متحرک برای المنتور

				
					<div class="news-ticker-container">
    <style>
        .news-ticker {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(270deg, #1a1a1a, #2d2d2d, #333);
            color: #ffffff;
            padding: 12px 20px;
            font-family: 'Segoe UI', Tahoma, sans-serif;
            overflow: hidden;
            white-space: nowrap;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 9999;
            direction: ltr;
            border-top: 1px solid #444;
            animation: gradient-animate 10s linear infinite;
        }

        @keyframes gradient-animate {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .ticker-content {
            display: inline-block;
            animation: ticker-scroll linear infinite;
            padding-left: 100%;
            position: relative;
        }

        @keyframes ticker-scroll {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(0); }
        }

        .ticker-item {
            display: inline-block;
            font-size: 16px;
            padding: 10px 50px 10px 20px; /* فاصله سمت راست 50px */
            margin: 0 20px;
            border-radius: 6px;
            background: linear-gradient(180deg, #333, #444);
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none !important;
            color: #fff !important;
            position: relative;
        }

        .ticker-item::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 30px; /* فاصله 30px از متن */
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            background: #ff4444;
            border-radius: 50%;
            animation: pulse 1.5s infinite;
            box-shadow: 0 0 15px #ff4444;
        }

        @keyframes pulse {
            0% { transform: translateY(-50%) scale(1); }
            50% { transform: translateY(-50%) scale(1.1); }
            100% { transform: translateY(-50%) scale(1); }
        }

        .ticker-content:hover {
            animation-play-state: paused;
        }

        .ticker-item:hover {
            transform: scale(1.03) translateY(-1px);
            box-shadow: 0 3px 10px rgba(255, 68, 68, 0.2);
            background: linear-gradient(180deg, #444, #555);
        }

        @media (max-width: 768px) {
            .ticker-item {
                font-size: 14px;
                padding: 8px 40px 8px 15px; /* تنظیم فاصله موبایل */
                margin: 0 15px;
            }
            
            .ticker-item::after {
                right: 25px;
                width: 12px;
                height: 12px;
            }
        }

        @media (max-width: 480px) {
            .ticker-item {
                font-size: 13px;
                padding: 6px 35px 6px 12px; /* تنظیم فاصله موبایل کوچک */
                margin: 0 10px;
            }
            
            .ticker-item::after {
                right: 20px;
                width: 10px;
                height: 10px;
            }
        }
    </style>

    <div class="news-ticker">
        <div class="ticker-content" id="tickerContent">
            <a href="https://example.com/news1" class="ticker-item" target="_blank" rel="noopener">خبر فوری: آغاز مذاکرات صلح بینالمللی در استانبول</a>
            <a href="https://example.com/news2" class="ticker-item" target="_blank" rel="noopener">اقتصاد: افزایش ۴٫۷ درصدی نرخ رشد اقتصادی در فصل اول</a>
            <a href="https://example.com/news3" class="ticker-item" target="_blank" rel="noopener">فناوری: معرفی پردازنده نسل پنجم از طرف شرکت سامسونگ</a>
            <a href="https://example.com/news4" class="ticker-item" target="_blank" rel="noopener">ورزش: قهرمانی ایران در مسابقات جودوی آسیا</a>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ticker = document.getElementById('tickerContent');
            const originalContent = ticker.innerHTML.trim();
            
            ticker.innerHTML = originalContent + originalContent;
            
            const contentWidth = ticker.scrollWidth / 2;
            const duration = contentWidth / 40;
            
            ticker.style.animationDuration = `${duration}s`;
        });
    </script>
</div>