5.00 / 1 oy

HTML ve CSS ile kayan yazı yapmak

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ç:

html css kayan yazi gif

BasParmak

20.02.2020 18:19

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
HTML ve CSS ile kayan yazı yapmak

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.