0
Kayıt Ol

bu css kod mobilde neden sorunlu gözüküyor

2

●

66

  • 06-06-2024, 00:22:07
    #1
    ekremcolak
    ekremcolak
    https://codepen.io/furkangiray_com/pen/MWeNVqZ burada kayan yazıyı kullandığımda bilgisayarda güzel görünüyor cep telefonunda kayan yazı aşırı titreyerek geçiyor ve göz yoruyor. Bunun bir çözümü var mı arkadaşlar teşekkürler.
  • 06-06-2024, 00:37:06
    #2
    Developer
    Developer
    Çünkü Marquee kullanılmayan ve kullanılması önerilmeyen bir kod. Birçok cihaz sorunlu olarak çalıştıracaktır. JS ile kaydırma yöntemlerini inceleyin.
  • 06-06-2024, 00:38:39
    #3
    esquare
    esquare 
    <!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kayan Yazı Örnekleri</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="marquee-container">
    <div class="marquee marquee-left-to-right">Soldan sağa ekrandan çıktığında başa döner</div>
</div>

<hr>

<div class="marquee-container">
    <div class="marquee marquee-bottom-to-top">Aşağıdan yukarıya çıkıp durur</div>
</div>

<hr>

<div class="marquee-container">
    <div class="marquee marquee-left-to-right fast">Hız Değeri Yüksek</div>
    <div class="marquee marquee-left-to-right medium">Orta Hız Değeri</div>
    <div class="marquee marquee-left-to-right slow">Hız Değeri Düşük</div>
</div>

<hr>

<div class="marquee-container">
    <div class="marquee marquee-alternate" onmouseover="this.style.animationPlayState='paused'" onmouseout="this.style.animationPlayState='running'">
        <img src="https://i1.wp.com/furkangiray.com/wp-content/uploads/2019/10/simge.png" width="100" height="100" alt="Furkan Giray">
        <p>Geçiş Yapan</p>
    </div>
</div>

<script src="scripts.js"></script>
</body>
</html>
    body {
    font-family: Arial, sans-serif;
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0;
}

.marquee {
    display: inline-block;
    padding: 10px 20px;
    box-sizing: border-box;
    white-space: nowrap;
}

.marquee-left-to-right {
    animation: marquee-left-to-right 10s linear infinite;
}

.marquee-bottom-to-top {
    animation: marquee-bottom-to-top 10s linear infinite;
}

.marquee-alternate {
    display: flex;
    align-items: center;
    animation: marquee-alternate 3s linear infinite alternate;
}

.fast {
    animation-duration: 5s;
}

.medium {
    animation-duration: 10s;
}

.slow {
    animation-duration: 20s;
}

@keyframes marquee-left-to-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes marquee-bottom-to-top {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(-100%);
    }
}

@keyframes marquee-alternate {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(50%);
    }
}