Yenilikçi CSS3 Animasyonunun 10 Şaşırtıcı Örneği
CSS3 estetik açıdan etkileyici bir dizi yeni özellik getirdi. Belki de en eğlenceli olanı, normalde JavaScript'e atanan birçok hareket tabanlı işlevi gerçekleştirmenizi sağlayan CSS animasyonu. Web'deki CSS animasyonunun en havalı, en yenilikçi ve daha da önemlisi en ilginç kullanımını keşfetmek için destansı arayışımda bana katılın. Başla!
Uyarı: Bu animasyonlar tarayıcıya özeldir, bu yüzden IE6'da sörf yapıyorsanız, Bell Tarafından Kaydedilen'i izlemeyi bırakmanın, çevirmeli bağlantıyı kaldırmanın ve modern bir tarayıcı indirmenin zamanı geldi.
Dönen Polaroidler
Bu eğitimde, tonlarca yeni CSS3 komutunu kullanarak nasıl inanılmaz, animasyonlu bir fotoğraf yığını oluşturabileceğiniz gösterilmektedir. Güçlü bir başlangıç yapıyoruz, bunu yenmek zor olacak.
Demoyu Görmek İçin Tıklayınız
Matris
Beyaz tavşanı takip et .. err Yani, bu harika Matrix animasyonuna göz atın. Film için tam olarak doğru değil (bireysel karakterler değişmez), ancak yine de etkileyici. Matrix'in tüm zamanların en iyi bilim kurgu filmlerinden biri olduğunu görün (diğer filmlerden değil, ilk filmden bahsediyorum), bu liste listemizin en üstüne atlayacak ve şüphesiz kalacak değerli bir rakip bulunana kadar bir süre orada.
Demoyu Görmek İçin Tıklayınız
Trippy Eğirme Sütunu Eğlenceli
Bu çılgın animasyon, dönen renkli kutular ve metin satırlarından oluşan bir dönen sütuna sahiptir. Genel etki çılgın serin ve inkar edilemez baş döndürücü. Bu şampiyon hala Matrix gelen gök gürültüsü çalmak için biraz kırık.
İpucu: Artan hareket hastalığı şansı için, animasyonu izlerken yukarı ve aşağı kaydırın ve başınızı ileri geri sallayın (hiçbir şekilde öğle yemeğinizi masanın üzerine attıktan sonra sahip olduğunuz herhangi bir yıkık donanımdan sorumlu değiliz).
Demoyu Görmek İçin Tıklayınız
DJ Kahraman
Bu eğitici, eğirme kayıtları oluşturmak için CSS3 ve jQuery'yi birleştirir. Ekrandaki kontrolleri kullanarak, kayıtların hızını kontrol edebilir veya bazı harika çizikleri düzenlemek için farenizle bir kayıt tutabilirsiniz.
Antika ahşap arka plan üzerinde sanal pikap? Bu oldukça büyük bir rakip kişi olabilir, bu tartışma ısınıyor. Devam edin, tıklayın. Oynamak istediğini biliyorsun.
Demoyu Görmek İçin Tıklayınız
3D Animasyonlu Küp
Bu, bir 3D küpün dönüşünü kontrol etmek için ok tuşlarını kullanmanızı sağlar. İlk başta oldukça topal olduğunu düşündüm ama sonra ok tuşlarını basılı tutup çıldırmasını ve turbo dönen ölüm moduna girebileceğini fark ettim, ki bu açıkça kullanılmıştı. Sonic The Hedgehog da dahil olmak üzere mega stil noktaları.
Demoyu Görmek İçin Tıklayınız
Roket gemisi
Kuşkusuz MS-Paint'in harikaları tarafından getirilen bir roket gemisi gökyüzünde nefes kesen bir hızla uçuyor. Bir çeşit ... Gerçekte, noktalı çizgilerle garip, dikdörtgen bir kuvvet alanı tarafından taşınan bir şekilde yüzüyor. Animasyonun yaklaşık yarısında roket, görünürde bir sebep olmadan pratik olarak kayboluyor, bu yüzden işgalci Vulcan muhriplerini uzak tutmak için silahlı bir gizleme cihazına sahip çok gizli bir yüksek teknoloji gizli roketi.
Tam olarak ciddi bir rakip değil. Aslında, bunu size neden gösterdim? Ve daha da önemlisi, bir Vulcan muhribi diye bir şey var mı, yoksa ben mi uydurdum?
Demoyu Görmek İçin Tıklayınız
Hava
Kar
Yapraklar
Tüm hava koşullarını tek seferde devirelim, olur mu? Sevimsiz animasyonun olduğu yerde, kaçınılmaz yağan kar, yapraklar, yağmur vb. Var. Beni yanlış anlamayın, bunlar oldukça havalı ve gerçekten mükemmel mevsimsel web sitesi değişikliklerine yol açabilir. Bununla birlikte, bu özel infazlar, iyi yapılmış olmalarına rağmen, bağlamla o kadar yaratıcı değildir. Sayfadaki tüm içeriği yok eden dev dolu taşlara sahip bir web sitesi oluşturursanız bana bildirin, şimdi bu bir şey olur.
Kar Demoyu Görmek İçin Tıklayınız
Yaprak Demosunu Görmek İçin Tıklayınız
Kapak Akışı
Bu animasyon, yukarıdaki DJ Hero örneği gibi hibrit bir CSS / jQuery tekniği kullanarak Apple'ın kapak akışını taklit eder. Apple'ı taklit ederek bu hem serin hem de inek kategorilerinde iyi bir performans sergiliyor ve aynı zamanda yenilikçi olma konusunda bir patlama işi yapıyor (bulabildiğim tek CSS3 Cover Flow sahte). Elimizde başka bir yarışmacı daha var.
Demoyu Görmek İçin Tıklayınız
Yıldız Savaşları
Hepsi bu, oyun bitti. Oynadıkları için diğer katılımcılara teşekkür etmek istiyorum, ama bu ödülü alıyor. HTML ve CSS'de (aptalca baktığınız canlı metin) yüksek sesle bağırmak için çıldırtan Yıldız Savaşları'nın açılış sahnesi. Size soruyorum, CSS animasyonunun daha iyi bir kullanımı olabilir mi? Ben hiç olmadığını söylüyorum. Güven bana, bunu en çılgın arkadaşına göster ve Noel sabahında sihirli bir şekilde 4 yaşında bir çocuğa dönüşecek.
Epic View Demosuna Tıklayın
(Safari + Kar Leoparı Gerekli)
Sonuç
Bu yarışmanın hileli olduğunu düşünenler için haklısın. Yıldız Savaşları örneğini bulduktan sonra, sadece karşılaştırma ile her şeyin ne kadar soluklaştığını vurgulamak için yarışma fikrini oluşturdum. Makalenin asıl amacı, CSS3'e yerleştirilmiş nispeten basit animasyon özellikleriyle oluşturabileceğiniz harika şeylerin sonu olmadığını göstermektir.
Hangisinin en sevdiğiniz olduğunu bize bildirmek için aşağıdaki yorumları kullanın. Ayrıca, başka örnekler biliyorsanız lütfen paylaşın!
