uygulanması HTML5 Y CSS3 Web uygulamalarının geliştirilmesinde daha fazla fayda sağlayacak yeni öğeleri dahil etme imkanı vererek, yalnızca bir sayfadaki öğeleri standartlaştırmak için yeni bir yol sağlamakla kalmadı, aynı zamanda bunların olanaklarını genişletmeye izin verdi. gibi diller bir yana JavaScript efektler ve geçişler sayesinde CSS3.
Belli ki kütüphaneler var JavaScript inanılmaz etkileri olan ve uygulamalarını oldukça basit hale getiren, ancak çoğu zaman bu işlevsellik kapsüllenmiştir ve değişiklik olasılıkları oldukça karmaşıktır.
Bu durumlar için kullanabiliriz CSS3 ve küçük bir çalışma ile bir atlıkarınca gibi gerçekten şaşırtıcı efektler ve işlevler elde edebiliriz, geçmişte sadece JavaScript.
Karuselimizi yaratmak
İlk olarak, sadece stil sayfamızın eklenmesini içereceğinden oldukça basit olacak olan atlıkarınca için HTML kodunu ekleyeceğiz, içindeki her şeyin fotoğraflar, diyagramlar veya bu durumda bizim atlıkarınca:
CSS3 atlıkarıncaDivimize dahil ettiğimiz sınıfları vurgulamak önemlidir, çünkü bunlar css'imizde manipülasyon yapmamıza izin vereceklerdir. Bu yapıldıktan sonra, ilk önce elemanlarımıza 3 boyutlu bir görünüm vererek başlayarak stil sayfamızın uygulanmasına geçeceğiz, bunun için özelliği kullanacağız. perspektif Y dönüştürmek:
.kartlar {konum: mutlak; üst: %50; sol: %50; genişlik: 190 piksel; yükseklik: 210 piksel; kenar boşluğu: 0; -webkit-perspektif: 800 piksel; perspektif: 800 piksel; -webkit-transform: çevir (-50%, -50%); -ms-dönüşüm: çevir (-50%, -50%); dönüştürmek: çevir (-50%, -50%); }Bunu yaptıktan sonra, daha sonra tanımlayacağımız bir kurala göre çalışan carousel stilini vermek için bazı animasyonlar ekleyeceğiz, geçiş yapmasını istediğimiz saniyeleri de tanımlıyoruz ve kartlarımıza pozisyon ayarlıyoruz. atlıkarınca:
.cards__content {konum: mutlak; genişlik: %100; yükseklik: %100; -webkit-dönüştürme stili: koru-3d; dönüştürme stili: koru-3d; -webkit-transform: translateZ (-182px) döndürmeY (0); transform: translateZ (-182px) döndürmeY (0); -webkit-animasyon: atlıkarınca 10s sonsuz kübik-bezier (1, 0.015, 0.295, 1.225) ileri; animasyon: atlıkarınca 10s sonsuz kübik-bezier (1, 0.015, 0.295, 1.225) ileri; } .cards__element {konum: mutlak; üst: 0; sol: 0; genişlik: 190 piksel; yükseklik: 210 piksel; sınır yarıçapı: 6 piksel; }Şimdi kullanarak kart üzerinde ayrı ayrı çalışacağız. n'inci çocuk, bu, bunların her biri için farklı bir arka plan rengi yerleştirmek ve bunlar için geçişlerin işlenmesi için:
.cards__element: nth-child (1) {arka plan: # 394fd5; -webkit-transform: döndürmeY (0) translateZ (182px); dönüştür: döndürY (0) çevirZ (182 piksel); } .cards__element: nth-child (2) {arka plan: # 39d570; -webkit-transform: döndürmeY (120deg) translateZ (182px); dönüştürme: döndürmeY (120deg) translateZ (182 piksel); } .cards__element: nth-child (3) {arka plan: # f0091f; -webkit-transform: döndürmeY (240deg) translateZ (182px); dönüştürme: döndürmeY (240deg) translateZ (182 piksel); }Sonunda için bir arka plan rengi belirledik vücut ve carousel kelimesi için kurallarımızı ekliyoruz, bunu ana kareler animasyonun kodunu tanımlamaktan sorumludur:
gövde {arka plan: # 6c4949; } @ -webkit-keyframes carousel {0%, %17,5 {-webkit-transform: translateZ (-182px) döndürmeY (0); transform: translateZ (-182px) döndürmeY (0); } %27.5, %45 {-webkit-transform: translateZ (-182px) döndürmeY (-120deg); transform: translateZ (-182px) döndürY (-120deg); } %55, %72,5 {-webkit-transform: translateZ (-182px) döndürmeY (-240deg); transform: translateZ (-182px) döndürY (-240deg); } %82,5, %100 {-webkit-transform: translateZ (-182px) döndürmeY (-360deg); transform: translateZ (-182px) döndürmeY (-360deg); }} @keyframes carousel {0%, %17,5 {-webkit-transform: translateZ (-182px) döndürmeY (0); transform: translateZ (-182px) döndürmeY (0); } %27.5, %45 {-webkit-transform: translateZ (-182px) döndürmeY (-120deg); transform: translateZ (-182px) döndürY (-120deg); } %55, %72,5 {-webkit-transform: translateZ (-182px) döndürmeY (-240deg); transform: translateZ (-182px) döndürY (-240deg); } %82,5, %100 {-webkit-transform: translateZ (-182px) döndürmeY (-360deg); transform: translateZ (-182px) döndürmeY (-360deg); }}Bu hazır olduğunda, hareketli atlıkarıncamızın tarayıcımızda nasıl göründüğüne bakalım:
Gördüğümüz gibi, oldukça basit ama işlevselliğini yerine getiriyor ve daha da iyisi, tek bir kod satırı kullanmadan JavaScriptGeriye sadece örneği alıp onunla biraz deney yapmak, boyutunu büyütmek, resimler eklemek ve atlıkarıncanın stilini değiştirmek kalıyor, bu, yapılış şekli nedeniyle tamamen mümkün olan bir şey.
