Web geliştirme dünyasında, kullanıcıların dikkatini çekmek ve sitenize dinamizm katmak için çeşitli animasyonlar kullanılır. Bu rehberde, HTML ve CSS kullanarak basit ve etkileyici bir kayan yazı animasyonu nasıl oluşturulacağını öğreneceksiniz. Hazırsanız, başlayalım!
HTML Kodları
İlk olarak, HTML dosyamızı oluşturalım. Basit bir <div> elementi kullanarak başlayacağız.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kayan Yazı Animasyonu</title>
<link rel="stylesheet" href="styles.css"> <!-- CSS dosyamızı bağlayalım -->
</head>
<body>
<div class="kayan-yazi-container">
<h1 class="kayan-yazi">Hoş Geldiniz!</h1>
</div>
</body>
</html>
CSS ile Tasarımları Ayarlama
Şimdi CSS dosyamızı oluşturalım ve kayan yazı animasyonumuzu burada ayarlayalım.
.kayan-yazi-container {
width: 100%; /* Container'ı ekran genişliğine yay */
overflow: hidden; /* Taşan kısımları gizle */
}
.kayan-yazi {
font-size: 36px;
text-align: center;
position: relative; /* Pozisyonu belirle */
animation: kayanYazi 10s linear infinite; /* Animasyonu tanımla */
}
@keyframes kayanYazi {
0% {
left: 100%; /* Başlangıç pozisyonu, sağdan başlasın */
}
100% {
left: -100%; /* Bitiş pozisyonu, soldan kaybolsun */
}
}
Animasyonun Ayarları
Burada @keyframes kuralını kullanarak "kayanYazi" adında bir animasyon tanımladık. Bu animasyon, başlangıçta yazıyı sağdan ekranın dışına yerleştiriyor ve sonra yavaşça sola kaydırarak ekrandan çıkarıyor. infinite değeri, animasyonun sonsuza kadar tekrarlanacağını belirtir.
Sonuçları Görüntüleme
Tarayıcınızda HTML dosyasını açın ve kayan yazı animasyonunu gözlemleyin.Yazı, ekranda belirdikten sonra yavaşça sola kayarak kaybolacaktır.
Bu kadar basit! HTML ve CSS kullanarak etkileyici bir kayan yazı animasyonu oluşturduk. Dilerseniz, metni, renkleri veya animasyon hızını değiştirerek kendi tasarımınıza uygun hale getirebilirsiniz. Umarım bu makale sizin için faydalı olmuştur. Keyifli kodlamalar. :)
26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi
