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
“`
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
- CSS Marquee Örnekleri
- CSS Marquee Animasyonları
- Marquee.js: Marquee oluşturmak için JavaScript kütüphanesi
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.