20 Fantastik SVG Animasyon Örneği

Ölçeklenebilir Vektör Grafikleri (SVG), XML ile yazılmış bir görüntü formatıdır. SVG ile iki boyutlu ölçeklenebilir grafikler kodlayabilirsiniz. Ardından bunları CSS ve JavaScript'te uygulayabilir ve değiştirebilirsiniz.

SVG üç tür grafiğe izin verir: vektör şekilleri (tüm yönlerde ve şekillerde düz ve eğri çizgiler), resimler ve metin. Çeşitli yetenekleri nedeniyle, web tasarımcıları karmaşık animasyonlar yapmak için SVG'ye başvurur. Kurulumları kolaydır, yeniden boyutlandırıldıklarında kalitelerini kaybetmezler ve çalışması için herhangi bir üçüncü taraf uygulaması gerektirmezler.

Animasyonların popülaritesi artmaya devam ettiğinden, çoğu onlara aşina değil. Bu makale, bu formatın potansiyelini gösteren 20 harika SVG animasyonunu vurgulayacaktır.

1. Kittonlar tarafından Tıbbi SVG Simgeleri

Bu sıcak ve akıcı animasyon, sağlıkla ilgili tüm web siteleri için harika. Farklı konuları listelerken, resimler ustaca görünecektir. Ambulans arabası ya da atom inşa edecek, göz açılacak ve doktor dışarı fırlayacak. Bu animasyon, SVG'nin tüm eğlencesini ve dinamizmini gösterir.

Bağlantı

2. SeanMcCaffery ile gezinin

Herhangi bir etkileşimli web sitesine koyabileceğiniz evrensel animasyon. Kenarların ince görünümü, fareyle üzerine geldiğinizde sizi tatmin edici bir his ile bırakır ve sizi bağlantıya tıklamaya davet eder.

Bağlantı

3. Yenilemek için Aşağı Çekin (Kağıt Düzlem) tarafından Nikolay Talanov

Genellikle, sayfalar üzerlerine "çekildiğinde" yenilenir. Bu animasyon bunu yeni bir düzeye getiriyor. Serbest bırakmak için aşağı çektiğinizde, gökyüzüne bir kağıt uçak fırlatacaksınız. Ziyaretçilerinizin uygulamanızı sık sık yenilemesini istiyorsanız, bunun gibi bir animasyon eklemeyi düşünmelisiniz.

4. Sadece Devam Et Diaco M. Lotfollahi

Ölçekleme Vektörünün potansiyelini gösteren bir SVG animasyonu. İnsan vücudunun düzgün ve doğru hareketi hipnotize edicidir.

Bağlantı

5. HTML5 Videoya Eklenen SVG Filtreleri

Google Chrome ekibinden Paul Irish, SVG'nin vektör grafiklerinin dışındaki içeriği nasıl değiştirebileceğini inceledi. SVG animasyonunun hazır bir videoya iyi bir ek olabileceğini göstermek için harika görsel filtreler oluşturmak için CSS ve SVG'yi birleştirdi.

Bağlantı

6. Yapboz

SVG animasyonu ile harika interaktif yapbozlar yapabilirsiniz. Bu örnekte, birçok resimden birini seçebilir ve bunun yapbozun birçok küçük parçasına nasıl ayrıldığını görebiliriz. Siz de yeniden yapılandırabilirsiniz!

Bağlantı

7. Patrick Young'dan Liner Gradyan

Neon ışıklar ve güzel yazı tipleriyle ilgileniyorsanız, bu animasyonun keyfine varacaksınız. Bu çalışma, mükemmel bir animasyon için nasıl hareketli çizgilere ihtiyacınız olmadığını, sadece harika bir yazı tipine ve gradyan efektli uygun renk koduna ihtiyacınız olduğunu gösterir.

Bağlantı

8. jjperezaguinaga ile Seyahat Edelim

Dünyanın popüler simge yapılarının etrafında dönen iki uçak ve bir sıcak hava balonu. Bu animasyon renkli, iyimser ve akıllara durgunluk veriyor. SVG'de ustaysanız yapabileceğiniz her şeyi gösterir.

Bağlantı

9. Mohamad Mohebifar tarafından saat

Geçerli saati gösteren, hareketli bir saatin basit bir SVG animasyonu. İşaretçilerin yatıştırıcı hareketi ve minimalist tasarım bu animasyon için harikalar yaratıyor.

Bağlantı

10. Luigi De Rosa'dan Animasyonlu Simgeler

Bu simgelerin üzerine gelirseniz, basit ama etkili olan animasyonları tetiklersiniz. Etkileyici bir animasyon ikonu yapmak için harikalar yaratmanız gerekmediğini görebilirsiniz.

11. SVG'deki Tüm Cihazlar, Chris Gannon

Kullandığımız tüm akıllı cihazların üzerinden en yaratıcı şekilde geçen tek seferlik bir animasyon. Masaüstü bir dizüstü bilgisayara, dizüstü bilgisayar bir tablete, ardından bir akıllı telefona dönüşecek.

Bağlantı

12. Chris Gannon'dan Şelale

Chris Gannon'dan bir diğeri, bu köpüklü bir şelale tabanının düzgün bir gösterimi. Suyun hareketi düzgün ve her şeyin daha gerçekçi görünmesini sağlamak için, sıçrayan suyun küçük damlalarının animasyonun sınırlarını terk ettiğini görebilirsiniz.

Bağlantı

13. Blake Bowen tarafından Bitki Jeneratörü

Şimdi bu başka bir şey. 'Oluştur' düğmesine tıkladığınızda, yükselen ve büyüyen bitkiler göreceksiniz. Ancak her tıkladığınızda farklı desenler oluşacaktır.

Bağlantı

14. Hamish Williams'tan Tıklanabilir Simge

Bir kez tıkladığınızda bir animasyonu tetikleyen başka bir etkileşimli SVG. Bu, tıkladığınızda "Gönder" animasyonunu başlatacaktır.

Bağlantı

15. Marco Barría'dan Yeni Pasta

Bir pastanın katman katman yapılışını gösteren ilginç animasyon. Doğum günü kartına uygun, etkileyici bir SVG animasyonu.

16. Chris Gannon'dan Kağıt Öğütücü

Kağıt parçalamayı izlemekten hoşlanıyorsanız, bir makinenin kağıtları sınırsız kez kesintisiz bir sırayla parçaladığını gösteren bu animasyonu çok seveceksiniz.

Bağlantı

17. GRAYGHOST tarafından Düşük PolyLion

Bu, bir aslanın kafasının hareketli çokgenler şeklinde belirip kaybolduğunu gösteren, akıllara durgunluk veren bir illüstrasyon ve animasyondur.

Bağlantı

18. Leela'dan Kum Saati Yükleyici

Yalnızca SVG kullanan başka bir etkili animasyon. Her 5 saniyede bir kum saati ters döner ve yeni bir döngü başlatır.

Bağlantı

19. Duyarlı İnek, Sarah Drasner

Bu, bir ineğe tıklamanıza ve şaşkın bir astronot ona bakarken onu ayın etrafında sürüklemenize izin veren eğlenceli bir interaktif animasyondur.

20. Domany'den Öğrenci

Hevesli bir öğrenci öğrenmeye hazır görünüyor! Kitap sayfalarının düzgünce döndüğü harika bir animasyon. Öğrencinin göz kırpması yok, ancak bu, bu listeyi tamamlamak için hala mükemmel derecede düzenli bir animasyon.

Bağlantı

Senin sıran

Bu listede olmayan favori SVG animasyonlarınız hangileri? Seçimlerinizi aşağıdaki yorumlarda paylaşın!