Html Kayan Yazı Kodu
▲
1 oy
Html ile kayan yazı kodu elinde olan var mı ? Web site yapmaya çalışıyorum ve yazdığım yazının sol tarafa doğru kaymasını istiyorum. Yardımcı olursanız sevinirim
1 Cevap
✓ En İyi Cevap
Html kayan yazı kodu için aşağıdaki kodu test edip kullanabilirsin ;
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Kayan Yazı Örnekleri</title>
<style>
/* Modern CSS Kayan Yazı */
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
background: #222;
color: #fff;
padding: 12px 0;
margin-top: 30px;
font-size: 18px;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 12s linear infinite;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<h2>1. Basit Kayan Yazı</h2>
<marquee>
Bu bir kayan yazıdır.
</marquee>
<hr>
<h2>2. Sağdan Sola</h2>
<marquee direction="left">
Bu yazı sağdan sola hareket eder.
</marquee>
<hr>
<h2>3. Soldan Sağa</h2>
<marquee direction="right">
Bu yazı soldan sağa hareket eder.
</marquee>
<hr>
<h2>4. Yukarı Doğru</h2>
<marquee direction="up" height="100">
Satır 1<br>
Satır 2<br>
Satır 3
</marquee>
<hr>
<h2>5. Aşağı Doğru</h2>
<marquee direction="down" height="100">
Satır 1<br>
Satır 2<br>
Satır 3
</marquee>
<hr>
<h2>6. Hızlı Kayan Yazı</h2>
<marquee scrollamount="10">
Bu yazı hızlı hareket eder.
</marquee>
<hr>
<h2>7. Yavaş Kayan Yazı</h2>
<marquee scrollamount="2">
Bu yazı yavaş hareket eder.
</marquee>
<hr>
<h2>8. Fare Üzerine Gelince Duran Yazı</h2>
<marquee onmouseover="this.stop();" onmouseout="this.start();">
Fareyi üzerine getirince durur, çekince devam eder.
</marquee>
<hr>
<h2>9. Sonsuz Döngü</h2>
<marquee loop="infinite">
Bu yazı sonsuza kadar kaymaya devam eder.
</marquee>
<hr>
<h2>10. Modern CSS ile Kayan Yazı (Tavsiye Edilen)</h2>
<div class="marquee">
<span>
🚀 Bu kayan yazı HTML yerine CSS animasyonu kullanılarak oluşturulmuştur.
Daha akıcıdır, modern tarayıcılarla tam uyumludur ve günümüzde önerilen yöntemdir.
</span>
</div>
</body>
</html>
Özkan Arıcı
👑 Efsane
· 0 soru · 97 cevap
▲
1 oy
1 ay önce
Html ile kayan yazı kodu elinde olan var mı ? Web site yapmaya çalışıyorum ve yazdığım yazının sol tarafa doğru kaymasını istiyorum. Yardımcı olursanız sevinirim
Html kayan yazı kodu için aşağıdaki kodu test edip kullanabilirsin ;
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Kayan Yazı Örnekleri</title>
<style>
/* Modern CSS Kayan Yazı */
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
background: #222;
color: #fff;
padding: 12px 0;
margin-top: 30px;
font-size: 18px;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 12s linear infinite;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<h2>1. Basit Kayan Yazı</h2>
<marquee>
Bu bir kayan yazıdır.
</marquee>
<hr>
<h2>2. Sağdan Sola</h2>
<marquee direction="left">
Bu yazı sağdan sola hareket eder.
</marquee>
<hr>
<h2>3. Soldan Sağa</h2>
<marquee direction="right">
Bu yazı soldan sağa hareket eder.
</marquee>
<hr>
<h2>4. Yukarı Doğru</h2>
<marquee direction="up" height="100">
Satır 1<br>
Satır 2<br>
Satır 3
</marquee>
<hr>
<h2>5. Aşağı Doğru</h2>
<marquee direction="down" height="100">
Satır 1<br>
Satır 2<br>
Satır 3
</marquee>
<hr>
<h2>6. Hızlı Kayan Yazı</h2>
<marquee scrollamount="10">
Bu yazı hızlı hareket eder.
</marquee>
<hr>
<h2>7. Yavaş Kayan Yazı</h2>
<marquee scrollamount="2">
Bu yazı yavaş hareket eder.
</marquee>
<hr>
<h2>8. Fare Üzerine Gelince Duran Yazı</h2>
<marquee onmouseover="this.stop();" onmouseout="this.start();">
Fareyi üzerine getirince durur, çekince devam eder.
</marquee>
<hr>
<h2>9. Sonsuz Döngü</h2>
<marquee loop="infinite">
Bu yazı sonsuza kadar kaymaya devam eder.
</marquee>
<hr>
<h2>10. Modern CSS ile Kayan Yazı (Tavsiye Edilen)</h2>
<div class="marquee">
<span>
🚀 Bu kayan yazı HTML yerine CSS animasyonu kullanılarak oluşturulmuştur.
Daha akıcıdır, modern tarayıcılarla tam uyumludur ve günümüzde önerilen yöntemdir.
</span>
</div>
</body>
</html>
1 ay önce
Cevap yazmak için .
Kategoriler
Forum İstatistikleri
Çevrimiçi (23)
0 üye, 23 ziyaretçi
Şu an kimse çevrimiçi değil.
