DLE ticker (marquee)

DLE ticker (marquee) - mywap.az https://mywap.az/ RSS - mywap.az https://mywap.az/assets/img/images/logo.png RSS - mywap.az https://mywap.az/ admin@localhost (admin) admin@localhost (admin) Sat, 25 Apr 2026 16:58:58 +0300 ✔ CSS-only (smooth, performanslı)<br> ✔ Responsive<br> ✔ Hover pause<br> ✔ Fade effect (premium görünüş)<br> ✔ “SON DƏQİQƏ” badge<br> ✔ DLE {custom} ilə dinamik<br> <br> 🔧 1. HTML ( header.tpl və ya main.tpl )<br> <br> <pre class="prettyprint"><div class="news-ticker"> <div class="ticker-label"> <span>SON DƏQİQƏ</span> </div> <div class="ticker-track"> <div class="ticker-content"> {custom order="date" limit="10" template="ticker"} </div> <div class="ticker-content"> {custom order="date" limit="10" template="ticker"} </div> </div> </div></pre> <br> 👉 2 dəfə yazmağımızın səbəbi: loop effekti (kəsilmədən axır)<br> <br> 🔧 2. ticker.tpl (yarat)<br> /templates/senin_template/ticker.tpl<br> <br> <pre class="prettyprint"><a href="{full-link}" class="ticker-item"> 📰 {title} </a></pre> <br> 🎨 3. CSS (FULL MODERN)<br> <br> <pre class="prettyprint">.news-ticker { position: relative; display: flex; align-items: center; height: 44px; background: #0f172a; overflow: hidden; font-family: 'Inter', sans-serif; } /* LABEL */ .ticker-label { background: linear-gradient(135deg, <a href="https://mywap.az/search?query=ff0033">#ff0033</a>, <a href="https://mywap.az/search?query=cc0029">#cc0029</a>); color: <a href="https://mywap.az/search?query=fff">#fff</a>; font-weight: 600; font-size: 13px; padding: 0 16px; height: 100%; display: flex; align-items: center; z-index: 3; white-space: nowrap; } /* TRACK */ .ticker-track { display: flex; flex: 1; overflow: hidden; position: relative; } /* CONTENT LOOP */ .ticker-content { display: flex; align-items: center; white-space: nowrap; animation: ticker-scroll 25s linear infinite; } /* ITEM */ .ticker-item { color: <a href="https://mywap.az/search?query=e2e8f0">#e2e8f0</a>; margin: 0 30px; font-size: 14px; text-decoration: none; transition: all 0.25s ease; } .ticker-item:hover { color: #38bdf8; } /* PAUSE ON HOVER */ .news-ticker:hover .ticker-content { animation-play-state: paused; } /* SMOOTH LOOP */ @keyframes ticker-scroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } /* FADE EDGES (PREMIUM LOOK) */ .news-ticker::before, .news-ticker::after { content: ""; position: absolute; top: 0; width: 60px; height: 100%; z-index: 2; pointer-events: none; } .news-ticker::before { left: 0; background: linear-gradient(to right, #0f172a, transparent); } .news-ticker::after { right: 0; background: linear-gradient(to left, #0f172a, transparent); } /* RESPONSIVE */ @media (max-width: 768px) { .ticker-item { font-size: 13px; margin: 0 20px; } .ticker-label { font-size: 12px; padding: 0 10px; } }</pre> <br> ⚡ 4. Nəticə<br> Bu koddan sonra səndə olacaq:<br> 🔥 Tam professional xəbər lenti<br> 🔄 Kəsilməyən smooth animasiya<br> 🖱 Hover pause<br> 🎨 Premium fade effect<br> 📱 Mobil uyğun https://mywap.az/topics/2?pid=2 DLE ticker (marquee) Kazimli Anar Fri, 24 Apr 2026 20:51:45 +0300 Сообщения https://mywap.az/topics/2?pid=2