Selamlar, web tasarımıyla ilgilenen herkes! Sizinle birlikte, kayan yazı efektini – web tasarımının en etkileyici ve çarpıcı özelliklerinden birini – ele alacağız. Kayan yazı efekti, bir yazının veya metnin belirli bir hız ve yönde hareket ettiği bir animasyondur. Genellikle duyurular, reklamlar veya kullanıcıya belirli bir bilgiyi vurgulamak için kullanılır.
Şimdi gelin bu popüler ve etkileyici efektin nasıl oluşturulacağına bakalım.
HTML ve CSS Kullanarak Kayan Yazı Efekti Oluşturmak:
İlk olarak, temel HTML ve CSS bilgisi gerektiren basit bir örnek ile başlayalım.
HTML dosyanızda aşağıdaki gibi bir <div> oluşturun:
<div class="kayan-yazi">Hoşgeldiniz!</div>
Daha sonra, aşağıdaki CSS kodunu kullanarak kayan yazı efektini oluşturun:
CSS
.kayan-yazi {
font-size: 24px;
white-space: nowrap;
overflow: hidden;
animation: kayma 5s linear infinite;
}
@keyframes kayma {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
Bu örnekte, yazı sağdan sola doğru kaymaktadır ve ‘5s’ süresi boyunca bu hareketi tekrarlamaktadır. ‘linear’ özelliği animasyonun hızının süre boyunca aynı kalmasını sağlar.
JavaScript Kullanarak Kayan Yazı Efekti Oluşturmak:
JavaScript kullanarak kayan yazı efekti oluşturmak daha fazla kontrol ve esneklik sağlar. İşte bir örnek:
<div id="kayan-yazi">Hoşgeldiniz!</div>
<script>
var yazi = document.getElementById("kayan-yazi");
var yaziKonumu = 0;
setInterval(kaydir, 50);
function kaydir() {
yaziKonumu++;
yazi.style.marginLeft = yaziKonumu + "px";
if (yaziKonumu > window.innerWidth) {
yaziKonumu = 0 - yazi.offsetWidth;
}
}
</script>
Bu kod parçacığı, yazıyı belirli bir süre aralığında (’50’ milisaniye) sola doğru kaydırır. Yazı, ekranın sağ tarafından tamamen çıktığında, soldan başlar ve hareketine devam eder.
Sonuç olarak, kayan yazı efekti, web sitenize dinamik ve çekici bir özellik eklemenin mükemmel bir yoludur. Ancak, kullanıcı deneyimini göz önünde bulundurarak bu efekti kullanmanızı öneririz. Çünkü aşırıya kaçıldığında, kullanıcıları rahatsız edebilir ve okumayı zorlaştırabilir. İyi bir tasarımın, kullanıcıları bilgilendirirken aynı zamanda rahat bir deneyim sağlaması gerektiğini unutmayın!
