Css Marquee Fotoğraf Kullanımı

CSS Marquee Fotoğraf Kullanımı: Kapsamlı Bir Kılavuz

Giriş

Marquee, bir web sayfasında metin veya görüntülerin yatay veya dikey olarak kaymasına olanak tanıyan bir CSS özelliğidir. Fotoğrafları marquee olarak kullanmak, web sitenize dinamik ve ilgi çekici bir unsur ekleyebilir. Bu makale, CSS marquee fotoğraflarının nasıl kullanılacağına dair kapsamlı bir kılavuz sağlayacaktır.

Marquee Oluşturma

Bir marquee oluşturmak için aşağıdaki CSS kodunu kullanın:

“`css
.marquee {
width: 100%;
height: 100px;
overflow: hidden;
}

.marquee-content {
width: 200%;
animation: marquee 10s linear infinite;
}

@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
“`

Bu kod, yatay olarak kayan 100 piksel yüksekliğinde bir marquee oluşturacaktır. Marquee içeriği, marquee genişliğinin iki katı genişliğinde olmalıdır, böylece kayma efekti oluşturulabilir.

Fotoğrafları Marquee Olarak Kullanma

Fotoğrafları marquee olarak kullanmak için, fotoğrafları marquee içeriğine ekleyin:

“`html

alt=”Resim 1″>
alt=”Resim 2″>
alt=”Resim 3″>

“`

Bu kod, üç fotoğrafı yatay olarak kayan bir marquee oluşturacaktır.

Marquee Özelliklerini Özelleştirme

Marquee’nin görünümünü ve davranışını aşağıdaki CSS özelliklerini kullanarak özelleştirebilirsiniz:

  • direction: Kayma yönünü ayarlar (yatay veya dikey)
  • speed: Kayma hızını ayarlar
  • delay: Kaymanın başlamadan önceki gecikmeyi ayarlar
  • loop: Marquee’nin sonsuz bir döngüde kayıp kaymayacağını ayarlar

Örneğin, aşağıdaki kod dikey olarak kayan ve 5 saniyede bir döngü yapan bir marquee oluşturacaktır:

css
.marquee {
direction: vertical;
speed: 5s;
loop: infinite;
}

Faydalı Siteler ve Dosyalar

Sonuç

CSS marquee fotoğrafları, web sitenize dinamik ve ilgi çekici bir unsur eklemenin harika bir yoludur. Bu kılavuzu takip ederek, kendi marquee fotoğraflarınızı kolayca oluşturabilir ve özelleştirebilirsiniz.

Yayımlandı

kategorisi