Chrome Güncellemesi Sonrası Kayan Yazı (Marquee) Sorunu ve 3 Kesin Çözüm!

Seyyah20

Orta Düzey

Mesajlar: 333

Kayıt tarihi: Jan 26th 2014

Konum: DENİZLİ/Gönlünüze ektiğiniz her güzellik, bir gün size bereketli bir hasat olarak dönecektir.

1023

Friday, 20.03.2026, 01:16

Chrome Güncellemesi Sonrası Kayan Yazı (Marquee) Sorunu ve 3 Kesin Çözüm!

Değerli Alaturkaa Forum Üyeleri ve Ziyaretçiler, Kıymetli Radyo Sahipleri ve Kurucular;
Bildiğiniz üzere, Google Chrome ve diğer modern tarayıcılar (Edge, Firefox vb.) yapılan son güncellemelerle birlikte artık eski nesil <marquee> (kayan yazı) kodlarını desteklemeyi durdurdu.
Bu durum, radyo indexlerinizdeki DJ isimlerinin ve duyuruların sabit kalmasına neden olmaktadır.

Radyo sitelerinizin görselliğini korumak ve bu teknik sorunu kalıcı olarak çözmek için, aşağıda sizin için hazırladığımız 3 farklı modern CSS seçeneğinden size uygun olanı seçip index kodlarınızla değiştirebilirsiniz.
SEÇENEK 1: Gelişmiş Hizalamalı Model (Flex Yapısı)
Bu seçenek, metni dikeyde tam ortalar ve profesyonel bir görünüm sunar. Eğer yazının kutu içinde yukarıda veya aşağıda kalmasından şikayetçiyseniz bu en ideal çözümdür.

HTML

HTML

<style>
/* Kayan yazı alanı için modern CSS ayarları */
#marquee-container {
    position: absolute;
    left: 302px;
    top: 409px;
    width: 790px;
    height: 32px;
    overflow: hidden;
    z-index: 9;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.kayan-metin {
    display: inline-block;
    padding-left: 100%;
    animation: kayma-efekti 25s linear infinite;
}

@keyframes kayma-efekti {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

#marquee-container:hover .kayan-metin {
    animation-play-state: paused;
}
</style>

<div id="marquee-container">
    <div class="kayan-metin">
        <div class="wpmd">
            <font color="#FF0000" face="Calibri" class="ws16"><B>RADYO SAHİBİ:</B></font>
            <font color="#339966" face="Calibri" class="ws16"><B> GÖNÜL DOSTLARI *** </B></font>
            <font color="#FF0000" face="Calibri" class="ws16"><B>GÖREVLİLER:</B></font>
            <font color="#FF6600" face="Calibri" class="ws16"><B> DJ- ALLATURKAA-1 *** </B></font>
            <font color="#339966" face="Calibri" class="ws16"><B> DJ- ALLATURKAA-2 *** </B></font>
            <font color="#00FF00" face="Calibri" class="ws16"><B> DJ- ALLATURKAA-3 *** </B></font>
            <font color="#00CCFF" face="Calibri" class="ws16"><B> DJ- ALLATURKAA-4 *** </B></font>
        </div>
    </div>
</div>

SEÇENEK 2: Klasik ve Sade Model (Line-Height Yapısı)
Eski index yapılarına en kolay uyum sağlayan, sade ve garantili bir yöntemdir. Mevcut #marquee1 ID'nizi korur.

HTML
</button>

HTML

<style>
#marquee1 .kaydir-beni {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: radyo-kaydir 25s linear infinite;
}

@keyframes radyo-kaydir {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

#marquee1:hover .kaydir-beni {
    animation-play-state: paused;
}
</style>

<div id="marquee1" style="position:absolute; overflow:hidden; left:302px; top:409px; width:790px; height:32px; z-index:9; line-height:32px;">
    <div class="kaydir-beni">
        <font color="#FF0000" face="Calibri" class="ws16"><B>RADYO SAHİBİ:</B></font>
        <font color="#339966" face="Calibri" class="ws16"><B> GÖNÜL DOSTLARI *** </B></font>
        <font color="#FF0000" face="Calibri" class="ws16"><B>GÖREVLİLER:</B></font>
        <font color="#FF6600" face="Calibri" class="ws16"><B> DJ- ALLATURKAA-1 *** </B></font>
        <font color="#339966" face="Calibri" class="ws16"><B> DJ- ALLATURKAA-2 *** </B></font>
    </div>
</div>

SEÇENEK 3: Tam Ekran ve Hızlı Duyuru Modeli
Daha uzun metinler veya tüm sayfa genişliğinde (veya belirli bir alanda) daha akıcı bir geçiş isteyenler için alternatif bir tasarımdır.

HTML
</button>

HTML

<style>
.duyuru-alani {
    position: absolute;
    left: 302px;
    top: 409px;
    width: 790px;
    height: 32px;
    overflow: hidden;
    background: rgba(0,0,0,0.1); /* Hafif gölge efekti */
    border-radius: 5px;
}

.duyuru-metni {
    display: inline-block;
    white-space: nowrap;
    animation: hizli-kay 20s linear infinite;
    font-family: 'Calibri', sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
}

@keyframes hizli-kay {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}
</style>

<div class="duyuru-alani">
    <div class="duyuru-metni">
        <span style="color: #FF0000;">DUYURU:</span> 
        <span style="color: #00CCFF;"> Radyomuz 7/24 Kesintisiz Yayında! *** </span>
        <span style="color: #FF6600;"> Keyifli Dinlemeler Dileriz... </span>
    </div>
</div>

Nasıl Düzenlenir?

Hız: Kodlardaki 25s değerini yükseltirseniz (örneğin 40s) yazı daha yavaş akar.
Konum: left ve top değerlerini kendi indexinizdeki koordinatlara göre değiştirebilirsiniz.
Durma: Tüm seçeneklerde, farenizi yazının üzerine getirdiğinizde kayma otomatik olarak durur; böylece isimler rahatça okunabilir.

Hayırlı Bayramlar ve İyi Yayınlar Dileriz!