Web Tasarımınızı Canlandırmak için 5 SVG Animasyonu

Animasyonlar bir web sitesini kaygan ve pürüzsüz hissettirebilir, ancak bu özelliği kendi çalışmanıza nasıl dahil edebilirsiniz? Bize katılın ve bu yaratıcı SVG animasyon örnekleriyle web tasarımınızı nasıl canlandıracağınızı öğrenin.

Ölçeklenebilir Vektör Grafikleriyle Çalışma

SVG, görüntüleri depolamak ve görüntülemek için pikseller yerine çizgileri kullanan bir dosya biçimidir. Adından da anlaşılacağı gibi, ölçeklenebilir vektör grafikleri kaliteden ödün vermeden ölçeklenebilir.

Yeniden boyutlandırma için harika olmasının yanı sıra, HTML içinde SVG kodunu da kullanabilirsiniz ve diğer herhangi bir öğe gibi hareket edecektir. Bu, kullanabileceğiniz anlamına gelir CSS kuralları, JavaScript kodu, ve en önemlisi, web sitenizin SVG'leriyle animasyonlar.

Adobe Illustrator gibi yazılımları ve SVGator gibi web sitelerini kullanarak SVG'ler oluşturabilirsiniz, ancak bunları elle de oluşturabilirsiniz. SVG formatı bir düz metin XML dilidir ve biraz HTML'ye benzer.

Bu örnekte, kendi simgeleri ve blok renkli bir arka planı olan dört düğme bulunmaktadır. Bir düğme seçtiğinizde, bir daireden yuvarlak bir dikdörtgene dönüşürken, sayfanın arka plan rengini de düğmeyle eşleşecek şekilde değiştirir.

JS ve CSS karışımı bu sonuçları üretir ve her şey bir döngü ile başlar. olay dinleyicileri ekler her düğmeye.

için (var ben = 0; i < menuItems.length; ben++) {
 menuItems[i].addEventListener('Tıklayın', düğmeKlik);
}

Bir düğmeye tıklandığında, buttonClick() adlı bir işlev birkaç eylem gerçekleştirir. Sayfanın arka plan rengini değiştirerek başlar:

belge.body.style.backgroundColor = `#${Bugün nasılsın?.getAttribute('veri arka planı')}`;

Bundan sonra, basılan butona bir CSS sınıfı ekleyerek bir animasyonu tetikler ve butonun arka plan rengini değiştirir.

menuItemActive.classList.remove('menu__item--etkin');
this.classList.add('menu__item--etkin');
menuItemActive.classList.add('menu__item--canlandır');
this.classList.add('menu__item--canlandır');
menuItemActive = Bugün nasılsın?;

Basit olsa da, bu SVG animasyon örneği, web sitenizi daha ilgi çekici hale getirmenin benzersiz bir yolunu sunar. Bu tür tasarım özelliği, mobil web siteleri ve HTML tabanlı uygulamalar için mükemmeldir.

Bir SVG yoluna istediğiniz kadar düğüm ekleyerek onları metin oluşturmak için ideal hale getirebilirsiniz. Bu basit vuruş animasyonu, metnin sanki yazılıyormuş gibi soldan sağa görünmesiyle tekniği mükemmel bir şekilde gösterir.

Animasyonun ana kareleri yoktur, sadece CSS geçiş özelliğinin yanında yeni bir kontur genişliği uygular. Bu, her satırın karmaşık animasyon olmadan ekranda kendisini çizmesini sağlar.

.path-1 {
 vuruş-dasharray: 1850 2000;
 vuruş-dashoffset: 1851;
 geçiş: 5s doğrusal;
}

Bir JS işlevi, kodun yoğunluğunu daha da azaltmak için tek bir üst CSS sınıfı kullanarak metnin her bölümüne benzersiz bir CSS sınıfı ekler.

$(işlev() {
işlevanimasyonBaşlat() {
 $('#konteyner').addClass('yüzgeç');
 }
setTimeout (animationStart, 250);
});

Yalnızca CSS örneği olarak, bu SVG animasyonu, JavaScript koduna parmaklarını sokmak istemeyen herkes için harikadır. Fikir basit: Bir düğme, üzerine geldiğinizde tam bir kenarlığa dönüşen bir alt çizgi ile başlar.

CSS ana kareleri, düğme için iki durum oluşturur. İlk durum daha kalın bir kontura sahiptir ve %0'dan başlayarak yalnızca SVG şekil düğmesinin altını kaplar. Diğer durum, daha ince bir vuruşla %100'de tam düğmedir.

@ana kareler Berabere {
 0% {
 vuruş-dasharray: 140 540;
 vuruş-dashoffset: -474;
 kontur genişliği: 8 piksel;
 }
100% {
 vuruş-dasharray: 760;
 vuruş-dashoffset: 0;
 kontur genişliği: 2 piksel;
 }
}

Bu ana kareler, yalnızca kullanıcı imleci düğmenin üzerine getirdiğinde SVG şekil düğmesi ana hattına uygulanır. Şunu kullanır: vurgulu CSS sözde sınıfı Bunu başarmak için, animasyon ana karelerini düğmeye ekleyen bir kuralı tetikleyin.

.svg-sarmalayıcı:vurgu.şekil {
-webkit-animasyon: 0.5sBeraberedoğrusalileri;
animasyon: 0.5sBeraberedoğrusalileri;
}

Bu, karmaşık kod kullanmadan nasıl güzel animasyonlar oluşturabileceğinizi gösterir. Kendi web siteniz için daha ayrıntılı etkileşimli öğeler oluşturmak için bu temel bilgileri ve yaratıcılığınızı kullanabilirsiniz.

Kaputun altında pek çok ilginç teknik varken, bu SVG saat örneğine bakarken neyin tartışılacağına karar vermek zor.

Başlamak için, geçerli tarih ve saati toplamak için Date() işlevini kullanır. Bu değeri kullanarak, getHours(), getMinutes() ve getSeconds() işlevleri, verileri ilgili bölümlerine böler. Kod daha sonra her bir elin saat üzerindeki konumunu hesaplar.

var tarih = yeniTarih();
var saatAçı = 360 * tarih.getHours() / 12 + tarih.getMinutes() / 2;
var dakikaAçı = 360 * tarih.getMinutes() / 60;
var secAçı = 360 * tarih.getSeconds() / 60;

Ellerin her birini bir dizide saklayarak, kod her çalıştığında konumları çok kolay bir şekilde ayarlanabilir.

eller[0].setAttribute('itibaren', kaydırıcı (sekAngle));
eller[0].setAttribute('ile', kaydırıcı (secAngle + 360));
eller[1].setAttribute('itibaren', kaydırıcı (dakikaAçı));
eller[1].setAttribute('ile', kaydırıcı (dakikaAçı + 360));
eller[2].setAttribute('itibaren', kaydırıcı (saat Açısı));
eller[2].setAttribute('ile', kaydırıcı (saatAçı + 360));

Web tasarımı alanında zamanın sınırlı uygulamaları vardır, ancak geri sayım sayaçları, saatler ve zaman damgalarını depolamak için kullanışlıdır. Bu örnek ayrıca değişkenlerle dinamik SVG animasyonları oluşturmaya yönelik bir fikir sunar.

Bu CSS güdümlü SVG animasyonu, herhangi bir formun inanılmaz görünmesini sağlamak için zarif bir yol sağlar.

Hiçbir şey seçilmediğinde, formda her alanın altında gri renkli çizgiler bulunur. Bir alan seçildiğinde, yumuşak bir animasyonla soldan kayan bir çizgi belirir. Kullanıcı farklı bir alan seçerse, çizgi yumuşak bir hareketle yeni konumuna kayar.

Son olarak, kullanıcı bir kez bastığında Giriş yapmak düğmesini tıkladığınızda çizgi, sayfa yüklenirken titreşen bir daireye dönüşür.

Bu SVG örneği özellikle etkileyici çünkü böylesine karmaşık bir sonuç üretmek için yalnızca CSS'ye güveniyor. Verileri depolamak için CSS değişkenlerini kullanır ve ana uygulama gibi öğeleri kontrol etmeyi kolaylaştırır.

$ uygulama dolgusu: 6vh;
$ uygulama genişliği: 50vh;
$uygulama yüksekliği: 90vh;
#uygulama {
 genişlik: $uygulama genişliği;
 yükseklik: $uygulama yüksekliği;
 dolgu: $app-dolgu;
 arka plan: beyaz;
 kutu gölgesi: 002geri rgba(siyah, 0.1);
}

Bu örneği hemen hemen her web formunda kullanabilir ve kullanıcılarınızla daha önce hiç olmadığı kadar etkileşim kurabilirsiniz.

HTML, JS ve CSS ile Kendi SVG Animasyonlarınızı Oluşturma

Sıfırdan bir SVG animasyonu oluşturmak, ilk başladığınızda zor bir süreç olabilir. Bu örnekler, web sitenizin parlamasını sağlayacak SVG animasyonları oluşturmak için ihtiyacınız olan önde başlamanızı sağlayacaktır.

Bilmeniz Gereken 9 Gelişmiş Medya Sorgusu CSS Püf Noktası

Sonrakini Oku

Yazar hakkında