Web Tasarımcıları için 15 SVG Animasyonu Örneğ

SVG'nin (Ölçeklenebilir Vektör Grafikleri), web üzerinde kullanılan diğer görüntü formatlarına kıyasla birçok avantajı vardır. İlk ve en önemlisi, SVG'ler ölçeklenebilir, bu nedenle herhangi bir ekran boyutuna herhangi bir kalite kaybı olmadan uyum sağlayabilir. Ardından, tarayıcılar daha az kaynak kullanarak bunları daha hızlı yükleyebilir. Ayrıca, normal HTML öğeleri gibi CSS ile düzenlenebilirler. Statik görüntüler için kullanılmasının yanı sıra, SVG ile harika animasyonlar da oluşturabilirsiniz. Bu yazıda, kendi web projelerinizde de kullanmanız için size ilham verecek 15 SVG animasyon örneği topladık.

Web Design Trends for 2020

Jose Aguinaga'nın bu harika 'Bugün Bir Gezgin Olun' demosu şu anda CodePen'deki en popüler SVG animasyonu ve bu sanatsal projeye çok fazla çalışma yapıldığı için bu bir tesadüf değil. Yazar, grafikleri Adobe Illustrator ile oluşturdu ve SVG Export eklentisiyle dışa aktardı. Ayrıca, dünyayı dikkatlice ekranın etrafında hareket ettiren ince ayarlı ana kare animasyonunu oluşturmak için Sass ön işlemcisini kullandı

Animasyonlu görüntülerin yanı sıra, harika metin efektleri oluşturmak için SVG animasyonlarını da kullanabilirsiniz. Örneğin, Mack Ayache'nin bu güzel metin animasyonuna bir göz atın. Harfleri oluşturmak için basit SVG şekillerinden yararlanır. Ardından, kontur-dashoffset ve kontur-dasharray SVG niteliklerini kullanarak hareketi her harfe ayrı ayrı ekler. Ancak, bu öznitelikleri HTML içindeki öğesine değil, CSS'ye ekler. Bunu yapabilir, çünkü SVG’nin sunum özellikleri CSS özellikleri olarak da kullanılabilir.

Benzer içerikler