Buradaki fikir, karusel olmadan bir slayt gösterisinin görünümünü oluşturmaktır. Diğer bir deyişle, bir dizi görüntüyü soldan sağa kaydırıyoruz ve görüntülerin sonuna ulaşıldığında tekrarlıyoruz. İşin püf noktası, CSS animasyonlarıyla birlikte tek bir arka plan resmi kullanmamızdır (...)
Buradaki fikir, karusel olmadan bir slayt gösterisinin görünümünü oluşturmaktır. Başka bir deyişle, bir dizi görüntüyü soldan sağa kaydırıyoruz ve görüntülerin sonuna ulaşıldığında tekrarlıyoruz.
İşin püf noktası, ekran boyunca hareket ettirmek ve bittiğinde tekrarlamak için CSS animasyonlu tek bir arka plan resmi kullanmamızdır. Bu, gerçekten tek bir resim kullandığımızda bir resim galerisi yanılsaması yaratır.
HTML'yi kurma
HTML’imizin nasıl yapılandırılması gerektiğine dair bir plan:
Üzerinde çalıştığımız iki öğe var: bizim aradığımız .containerve görüntü alanının tam genişliğine uyan diğeri .sliding-backgroundise arkasında oturan .containerve onu taşan bir diğeri . Esasen, ekran boyunca kayarken .containertam genişliğini gizlemek için bir maske olarak kullanıyoruz .sliding-background.
Bu, HTML biçimlendirmesinde yalnızca iki öğe oluşturmamız gerektiği anlamına gelir:
Elemanları Konumlandırma
Devam edelim ve iki öğemizi doğru bir şekilde konumlandıracak bazı CSS ekleyelim.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Bizim .container, overflowdışında görsel olarak bulunan her şeyi gizleyecek özelliği kullanır . Bir fotoğraftaki ekin gibi düşünün. Kabın dışında fazladan şeyler olabilir, ancak kap onu görmemizi engelliyor.
İşte burada .sliding-backgrounddevreye giriyoruz. Görüntü alanlarının çoğunu aşacak saçma bir genişliğe ayarlandı. İşin püf noktası da bu: kaptan taşacak bir şey olmalı. Bu durumda, 5076pxtarayıcı görünüm alanlarının çoğunu aşması gereken , biraz keyfi olarak seçilmiş bir genişlik kullanıyoruz .
Arka Plan Resmini Oluşturma
Bir slayt gösterisi galerisi illüzyonunu yaratıyorsak bir resme ihtiyacımız var, değil mi? Bir sonraki işimiz bu.
5076pxKayan arka plan için biraz keyfi olarak seçilen genişlikten nasıl bahsettiğimizi hatırlıyor musunuz? Pekala, keyfi, ama 3'e güzel bir şekilde bölünebilmesi anlamında kasıtlı, bu da bir dakika uzunluğundaki döngü için zamanlamaya uyuyor ve biraz sonra ortaya çıkacak. Bu, arka plan resmimizin tuvalinin 5076 / 3veya olduğu anlamına gelir 1692px. Sonunda, arka planımız sonsuz bir döngüde bir dakikada toplam üç kez tekrar edecektir. Kazanmak için matematik!
500pxYüksekliği gerçekten keyfidir. Bu, istediğiniz her şey olabilir ve aynı zamanda arka plan görüntüsü dosyasının gerçek boyutu olduğu sürece.
Bu bölümün başında demo için arka plan görüntüsü oluşturmak için kullanılan Photoshop dosyası, bir başlangıç noktası arıyorsanız indirilebilir.
Resim kaydedildikten (ve optimize edildikten!) Sonra, CSS'de arka plan resmi olarak kullanacağımız şey budur:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Harika! Bu bize, kapsayıcıdan taşan ve artık ekranda sonsuza kadar kaydırmak için kullanılabilen devasa görüntüyü verir.
Arka Planı Canlandırma
Pekala, bu şeyi hareket ettirelim. Görüntünün sonsuza kadar devam edeceği kusursuz bir efekt yaratmak için, bir döngüde soldan sağa gitmesini istiyoruz.
Öncelikle CSS animasyonunu tanımlayalım:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Biz kullandığınız transformanimasyon şöyle başlar kabın sol kenarında sol görüntüyü konumlandırmak için özellik:
Animasyon tamamlandığında, konumu negatif olarak (soldan sağa) resmimizin tam genişliğiyle eşleşen bir miktarda dönüştürmüş olacaktır. Ve .sliding-backgroundgerçek görüntünün genişliğinin üç katı olduğundan, görüntü tekrar döngüye girmeden önce% 0 ile% 100 arasında üç kez yinelenir.
Not: ek kullanmamızın nedeni
background-position, ana ekranda canlandırmak yerine transformhareketi yapmak için çok daha performanslı bir animasyon kullanabilmemiz içindir .
Tamam, sınıftaki slideanimasyonumuzu arayarak işleri tamamlayalım .sliding-background:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationÖzelliği talimat .sliding-backgroundkullanımı slideanimasyon ve doğrusal bir seferde bir dakika, sonsuz döngü için çalıştırmak.
Hepsini bir araya koy
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )