Web tasarımında kullanıcı deneyimini artırmanın yollarından biri, içerikleri dinamik ve akıcı bir şekilde sunmaktır. Bu yazıda, saf CSS kullanarak sonsuz kayan liste (marquee) oluşturmayı göstereceğiz.
HTML Yapısı
Kayan listeyi oluşturmak için basit bir HTML yapısı yeterlidir. İki <ul> listesini yan yana koyarak sürekli kayma efekti elde edebilirsiniz:
<div class="marquee">
<ul class="marquee-content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<ul class="marquee-content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>CSS ile Animasyon
Marquee animasyonunu @keyframes ve CSS değişkenleri ile kontrol edebiliriz:
.marquee {
--marquee-gap: 20px;
--marquee-speed: 5s;
display: flex;
overflow: hidden;
gap: var(--marquee-gap);
max-width: 100vw;
}
.marquee-content {
display: flex;
align-items: center;
justify-content: space-around;
flex-shrink: 0;
gap: var(--marquee-gap);
min-width: 100%;
white-space: nowrap;
animation: marqueeScrolling var(--marquee-speed) linear infinite;
}
@keyframes marqueeScrolling {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-100% - var(--marquee-gap)), 0, 0); }
}
ul li {
list-style: none;
}Özellikler ve Avantajlar
- Saf CSS: JavaScript kullanmadan animasyon sağlanır.
- Sonsuz Kayma: Liste sonuna gelindiğinde otomatik olarak başa döner.
- Esnek Tasarım: CSS değişkenleri ile hız ve boşluk kolayca ayarlanabilir.
- Duyarlı: Tüm ekran boyutlarında sorunsuz çalışır.
Sonuç
CSS ile oluşturulan bu sonsuz kayan liste, web sitenize daha dinamik ve modern bir görünüm kazandırır. Özellikle portföy, müşteri logoları veya ürün listelerinde kullanmak oldukça etkilidir.