Yakın zamanda bir sitenin tepesine kayan yazı eklemem gerekti. Bootstrap içinde yine kayan yazı için özel bir araç bulamadığım için kendim kod yazmayı tercih ettim. Önceki yanıp sönen yazı efekti örneğinde de değindiğim gibi sayfa yüklerini minimumda tutmak ve sayfa açılma süresini uzatmamak için eğer bir tasarım problemini sadece css ile çözebiliyorsam sadece css kullanmaya özen gösteriyorum. Gereksiz yere javascript ve jquery yazmamaya çalışıyorum.
Bu örnekte de sadece Html ve CSS ile nasıl kayan yazı uygulaması hazırladığımı örnek kodlarla birlikte gösteriyorum. Ek bir not olarak kayan yazılarda yazıları okumak kimi zaman zor olabildiği için mouse imleci ile kayan yazının üzerine geldiğimde yazının durmasını istiyorum. Bu işlemi de sadece css ile yapacağız.
CSS Kodları:
.kayanyazi {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.kayanyazi span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite;
}
.kayanyazi span:hover {
animation-play-state: paused
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
HTML Kodları:
<p class="kayanyazi">
<span>Buraya kayan yazı gelecek buraya kayan yazı gelecek buraya kayan yazı gelecek
buraya kayan yazı gelecek buraya kayan yazı gelecek buraya kayan yazı gelecek
buraya kayan yazı gelecek buraya kayan yazı gelecek buraya kayan yazı gelecek
buraya kayan yazı gelecek buraya kayan yazı gelecek buraya kayan yazı gelecek
buraya kayan yazı gelecek buraya kayan yazı gelecek buraya kayan yazı gelecek
buraya kayan yazı gelecek</span>
</p>
Sonuç:
