Ölçeklenebilir Vektör Grafikleri (SVG), XML ile yazılmış bir görüntü formatıdır. SVG ile iki boyutlu bir ölçeklenebilir grafiği kodlayabilirsiniz. Ardından, bunları CSS ve JavaScript'te uygulayabilir ve değiştirebilirsiniz.
SVG üç tür grafiğe izin verir: vektör şekilleri (her yöne ve şekillerde düz ve eğri çizgiler), görüntüler ve metinler. Çeşitli yetenekleri nedeniyle, web tasarımcıları karmaşık animasyonlar yapmak için SVG'ye başvuruyorlar. Kurulumu kolaydır, yeniden boyutlandırıldığında kalite kaybetmez ve üçüncü taraf uygulamaların çalışmasını gerektirmez.
Animasyonlar popülaritesinin artmaya devam etmesi nedeniyle çoğu kişi onlara aşina değil. Bu makale, bu formatın potansiyelini gösteren 20 harika SVG animasyonunu vurgulayacaktır.
1. Kittons tarafından Tıbbi SVG Simgeler
Hızlı Linkler
- 1. Kittons tarafından Tıbbi SVG Simgeler
- 2. SeanMcCaffery tarafından Hover
- 3. Yenilemek için Aşağı Çekin (Kağıt Düzlem) Nikolay Talanov
- 4. Sadece Diaco M. Lotfollahi'den Devam Edin
- 5. HTML5 Videoya Eklenen SVG Filtreleri
- 6. bilmecenin
- 7. Patrick Young tarafından Liner Gradyan
- 8. jjperezaguinaga tarafından seyahat edelim
- 9. Mohamad Mohebifar tarafından Saat
- 10. Luigi De Rosa'dan Hareketli Simgeler
- 11. SVG'deki Tüm Cihazlar Chris Gannon
- 12. Şelale Chris Gannon tarafından
- 13. Blake Bowen'den Bitki Üreticisi
- 14. Hamish Williams'ın Tıklanabilir Simgesi
- 15. Marco Barría'dan Yeni Kek
- 16. Chris Gannon tarafından Kağıt Öğütücü
- 17. GRAYGHOST tarafından Düşük PolyLion
- 18. Leela tarafından kum saati yükleyici
- 19. Sarah Drasner'ın Duyarlı İneği
- 20. Domany'dan Öğrenci
- Senin sıran
Bu sıcak ve pürüzsüz animasyon, sağlıkla ilgili tüm web siteleri için mükemmeldir. Farklı iş parçacıklarını listelerken, görüntüler dikkatlice görünecektir. Ambulans vagonu veya atom inşa edilecek, göz açılacak ve doktor dışarı fırlayacak. Bu animasyon SVG'nin tüm eğlence ve dinamizmini göstermektedir.
bağlantı
2. SeanMcCaffery tarafından Hover
Herhangi bir etkileşimli web sitesine koyabileceğiniz evrensel animasyon. Üzerine geldiğinizde sınırların ince görünümü sizi tatmin edici bir his bırakır ve bağlantıya tıklamaya davet eder.
bağlantı
3. Yenilemek için Aşağı Çekin (Kağıt Düzlem) Nikolay Talanov
Genellikle, sayfalar “aşağı doğru” bastığınızda yenilenir. Bu animasyon bunu yeni bir seviyeye getiriyor. Serbest bırakmak için aşağıya doğru çektiğiniz zaman gökyüzüne bir kağıt uçağı fırlatacaksınız. Ziyaretçilerinizin uygulamanızı sık sık yenilemesini istiyorsanız, bunun gibi bir animasyon eklemeyi düşünmelisiniz.
4. Sadece Diaco M. Lotfollahi'den Devam Edin
Ölçekleme Vektörünün potansiyelini gösteren bir SVG animasyonu. İnsan vücudunun düzgün ve kesin hareketi hipnotize edicidir.
bağlantı
5. HTML5 Videoya Eklenen SVG Filtreleri
Google Chrome ekibinden Paul Irish, SVG'nin vektör grafikleri dışındaki içeriği nasıl değiştirebileceğini inceledi. SVG animasyonunun hazır bir videoya iyi bir katkı olabileceğini göstermek için şaşırtıcı görsel filtreler oluşturmak üzere CSS ve SVG'yi birleştirdi.
bağlantı
6. bilmecenin
SVG animasyon ile şaşırtıcı interaktif yapbozlar yapabilirsiniz. Bu örnekte, birçok resimden birini seçebilir ve yapbozun birçok küçük parçasına nasıl yapı bozduğunu görebiliriz. Siz de yeniden yapılandırabilirsiniz!
bağlantı
7. Patrick Young tarafından Liner Gradyan
Neon ışıklarına ve güzel yazı tiplerine meraklıysanız, bu animasyondan keyif alacaksınız. Bu çalışma, harika bir animasyon için hareketli çizgilere ihtiyacınız olmadığını, sadece harika bir yazı tipi ve degrade efektli doğru renk kodunu gösterir.
bağlantı
8. jjperezaguinaga tarafından seyahat edelim
İki uçak ve dünyanın popüler yerlerinden dönen bir sıcak hava balonu. Bu animasyon renkli, iyimser ve akıllara durgunluk veriyor. SVG konusunda 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 Hareketli Simgeler
Bu simgelerin üzerine gelirseniz, basit ama etkili olan animasyonları tetiklersiniz. Etkileyici bir animasyonlu simge yapmak için harikalar yapmanız gerekmediğini görebilirsiniz.
11. SVG'deki Tüm Cihazlar Chris Gannon
En yaratıcı şekilde kullandığımız tüm akıllı cihazların üzerinden geçen tek bir animasyon. Masaüstü bir dizüstü bilgisayar, dizüstü bilgisayar bir tablet haline, sonra bir akıllı telefona dönüşecek.
bağlantı
12. Şelale Chris Gannon tarafından
Chris Gannon'dan bir başkası, bu köpüklü bir şelale dibinin temiz bir gösterimidir. Suyun hareketi düzgündür ve her şeyin daha gerçekçi görünmesini sağlamak için animasyonun sınırlarından çıkarak sıçrayan suyun küçük damlalarını görebilirsiniz.
bağlantı
13. Blake Bowen'den Bitki Üreticisi
Şimdi bu başka bir şey. 'Oluştur' düğmesine tıkladığınızda bitkilerin yükselip büyüdüğünü göreceksiniz. Ancak her tıkladığınızda farklı desenler oluşacaktır.
bağlantı
14. Hamish Williams'ın Tıklanabilir Simgesi
Tıkladığınızda bir animasyonu tetikleyen başka bir etkileşimli SVG. Bu, tıkladığınızda “Gönder” animasyonunu başlatır.
bağlantı
15. Marco Barría'dan Yeni Kek
Bir kek katmanının katmanlara göre yapımını gösteren ilginç animasyon. Doğum günü kartı için uygun etkileyici bir SVG animasyonu.
16. Chris Gannon tarafından Kağıt Öğütücü
Kağıt parçalama izlemekten hoşlanıyorsanız, makine parçalama kağıdını kağıtla sınırsız zamanlarda kesintisiz bir sırayla gösteren bu animasyondan keyif alacaksınız.
bağlantı
17. GRAYGHOST tarafından Düşük PolyLion
Bu, bir aslanın kafasını animasyonlu çokgenler biçiminde görünüp kaybolan betimleyen akıllara durgunluk veren bir çizim ve animasyondur.
bağlantı
18. Leela tarafından kum saati yükleyici
Sadece SVG kullanan başka bir etkili animasyon. Her 5 saniyede bir, kum saati baş aşağı dönecek ve yeni bir döngü başlatacaktır.
bağlantı
19. Sarah Drasner'ın Duyarlı İneği
Bu, şaşkın bir astronot bakarken bir ineğe tıklayıp ayın etrafına sürüklemenizi sağlayan komik bir etkileşimli animasyondur.
20. Domany'dan Öğrenci
Hevesli bir öğrenci öğrenmeye hazır görünüyor! Kitap sayfalarının düzgünce döndüğü harika bir animasyon. Öğrenciden yanıp sönme yok, ancak bu hala bu listeyi tamamlamak için mükemmel bir animasyon.
bağlantı
Senin sıran
Bu listede bulunmayan favori SVG animasyonlarınız hangileridir? Seçimlerinizi aşağıdaki yorumlarda paylaşın!
