HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
HTML ve CSS Kodu Kullanarak Kayan Bant Animasyonu
Merhaba Arkadaşlar, Hoş Geldiniz, Bugünkü Blogumuz da HTML ve CSS Kullanarak Görüntülerle Kayan Bant Animasyonunun Nasıl Oluşturulacağını Göreceğiz . Ondan Önce Bu Projenin Neyle İlgili Olduğunu Görelim.CSS Kullanarak Kayan Bant Animasyonunun Canlı Önizlemesi: -
Bu kayan bant, CSS'de görüntüleri aynı olan ızgara formatında (satır satır) görüntülemek için kullanılan animasyon yöntemlerinden biridir. ama burada görüntüler haber kanallarındaki son dakika haber komutları gibi birer birer taşınıyor. Aynı şekilde bu projeyi de görsellerle oluşturacağız.
| Proje İndirme | Bağlantı Aşağıda Mevcuttur |
| Kullanılan dil | HTML ve CSS |
| Dış bağlantı / Bağımlılıklar | HAYIR |
| duyarlı | Evet |
O halde Kaynak Kodlarını Ekleyerek Kayan Bant Yolculuğumuza Başlayalım. Bunun İçin Öncelikle Html Kodunu Kullanıyoruz.
Kayan Bant Animasyonu İçin HTML KODU
HTML:
<div class="overflow-hidden">
<div class="flex -mx-4 img-ticker">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x341/f4ccccff/434343?text=1">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x192/f4ccccff/434343?text=2">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x341/f4ccccff/434343?text=3">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x192/f4ccccff/434343?text=4">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x341/f4ccccff/434343?text=5">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x192/f4ccccff/434343?text=6">
</div>
</div>Burada öncelikle div sınıfını tüm içeriğin birbiriyle çökmeden gizlenmesi için konteyner olarak ekliyoruz ve o kısım CSS ile yapılıyor.
Yine görüntülerin kayan yazı formatında canlandırılması için başka bir div sınıfı ekledik.
Şimdi HTML Kodunu bitirdik, Şimdi CSS kodunu ekleyerek Ticker Tape animasyonumuza başlayalım.
Kayan Bant Animasyonu İçin CSS KODU
CSS:
@keyframes ticker-kf {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-108rem, 0, 0);
}
}
.img-ticker {
animation: ticker-kf 18s linear infinite;
}Artık CSS Kodunu eklemeyi bitirdik. Ancak burada sadece kayan bant animasyonunu yapmak için yeterli olduğundan daha az kod satırı kullandık. Bu kodu aşağıda daha az adımda açıklayayım.
ADIM 1: Öncelikle keyframes özelliği ile animasyona Ticker-tf adını verdik.
ADIM 2: İkinci olarak, animasyonun başlangıç değerini %0 olarak sabitledik. İçerisine sadece transform:translate3d(0, 0, 0) özelliğini ekliyoruz, böylece görüntüler animasyona başlamak için başlangıç konumunda olacak.
ADIM 3: Üçüncü olarak, animasyonun bitiş değerini %100'e sabitledik, yani animasyon %0'dan %100'e kadar sonuna kadar çalışacak ve bitiş yüzdesi değerinin içine yine çizgi dönüşümünü ekleyeceğiz:translate3d (-108rem, 0, 0), artık görüntüler baştan sona (tüm görüntüler) hareket etmeye başlayacak ve buna kayan bant animasyonu adı verilecek.
ADIM 4: Son adım, animasyon adının Ticker-tf adını vermemiz ve görüntülerin görüntülenmesini 18 saniyelik doğrusal sonsuz olarak düzeltmemizdir. Böylece görüntüler her biri 18 saniye görüntülenecek ve şerit bandının animasyonu tekrar tekrar tekrarlanacaktır. değeri doğrusal sonsuza sabitlerken duruyoruz.
Böylece, Ticker Tape Animation projemizi başarıyla oluşturduk, ancak burada sayıların yer aldığı görselleri kullandık. Yani bu projeyi oluşturacaksanız, bazı Gerçek Zamanlı Görüntüler eklediğinizden emin olun. Ayrıca, verilen Çıktı Bölümünde proje önizlememizi görmek için bir dakikanızı ayırın.
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
