Bu animasyon ipuçlarını ve püf noktalarını kullanarak web sitenizi süsleyin.

Animasyonlar ve geçişler web tasarımının önemli bir parçasıdır. Web sayfanıza ince animasyonlar eklemek, onu daha ilgi çekici hale getirecektir. Animasyonlu simgeler, kinetik tipografi ve animasyonlu logolar gibi basit animasyonlar, kullanıcı deneyimini geliştirmeye yardımcı olabilir. Web sitenizi canlandırmanıza yardımcı olabilecek beş harika animasyon hilesi öğrenin.

1. Fareyle Üzerine Gelince Bir Öğeyi Dönüştürme

Yaygın bir tasarım uygulaması, etkileşime girildiğinde ölçeklenen bir öğeye sahip olmaktır. Örneğin, birisi faresini üzerine getirdiğinde düğmeleri biraz yukarı çevirmek isteyebilirsiniz. Bunu CSS kullanarak başarabilirsiniz. dönüştürmek mülk.

Bir düğmeniz olduğunu varsayarsak:

<düğme>
 Beni tıkla
düğme>

Düğmenin yanı sıra belgenin gövdesini de biçimlendirdiniz:

/* Düğmeyi sayfanın ortasına hizalar */
vücut {
görüntülemek: esnek;
yükseklik: 100vh;
hizalama öğeleri: merkez;
haklı içerik: merkez;
arka plan rengi: 





instagram viewer


siyah;
}
/* Düğmeye stil verir */
düğme {
dolgu malzemesi: 1em 2em;
arka plan: mavi;
sınır: 0; 
renk: beyaz;
sınır yarıçapı: 0.25rem;
imleç: Işaretçi;
yazı Boyutu: 2rem;
geçiş: dönüştürmek 500Hanım;
}
/* Fareyle üzerine gelme durumları */
düğme:vurgulu,
düğme:odak {
dönüştürmek: çevirY(0.75rem) 500Hanım;
}

Son blokla, düğme üzerinde fareyle üzerine gelme ve odaklanma durumlarını ayarlıyorsunuz. Her iki durumda da, düğmeyi Y ekseni boyunca 0,75 rem ötelersiniz. Düğme şöyle görünür:

Farenizi düğmenin üzerine getirdiğinizde, yukarı yönde hareket eder. Geçişin tamamlanması yarım saniye (500 ms) sürer. Bu, yalnızca düğmelerinize değil, diğer öğelere de (ör. resimler) uygulayabileceğiniz bir kalıptır.

2. Tek Bildirimle Birden Çok Anahtar Kare Bildirme

CSS animasyonlarındaki diğer bir yaygın model, aynı değer üzerinde birden çok kez yineleme yapmaktır. Bu, belirli bir renk, boyut veya yön olabilir. Bunu kullanarak başarabilirsin CSS ana kare animasyonları tek bildirimle birden çok ana kare bildirerek.

Önceki bölümde oluşturduğunuz düğmeyi düşünün. Düğmeye tıkladığınızda birkaç arka plan rengini yinelemek isteyebilirsiniz. Ama aynı zamanda animasyonun farklı aşamalarında aynı rengin üzerinden geçmek istiyorsunuz. Bunu kodda nasıl başaracağımızı görelim.

İlk olarak, düğmeyi yalnızca tıklandığında hareketlendirmek istiyorsunuz. Böylece bir komut dosyası.js İçinde düğmeye eriştiğiniz ve tıklandığında düğmede bir sınıfa geçiş yaptığınız dosya:

sabit düğme = belge.querySelector("düğme")
button.addEventListener("tıklamak", (e) => {
 button.classList.toggle('Parti zamanı')
})

Web sayfasından düğmeye erişmek için querySelector kullandık. DOM geçişi hakkında daha fazla bilgi edinmek için şu adresteki yayınımızı okuyun: JavaScript kullanarak DOM'da nasıl geçiş yapılır?.

bu Parti zamanı class adlı bir animasyonu etkinleştirir. Parti:

.Parti zamanı {
animasyon: Parti 2000Hanımsonsuz;
}

Animasyon için kırmızı ile başlayıp %25'te sarıya geçmek istiyorsunuz. Ardından, %75'te tekrar sarıya geçmeden önce %50'de kırmızıya dönersiniz. Son olarak, %100'de koyu mavi bir renge razı olursunuz:

@keyframes Parti {
 0%, 50% {
arka plan rengi: kırmızı;
 } 
 25%, 75% {
arka plan rengi: sarı;
 }
 100% {
arka plan rengi: hsl(200, 72%, 35%);
 }
}

Bu yaklaşım, renk tabanlı bir arka planda renkler arasında geçiş yapmak için oldukça kullanışlıdır. Bir değişkende birden çok anahtar kareyi tekrarlayabildiğiniz için, aynı özelliği animasyonunuzun farklı aşamalarında kullanmak çok kolay hale gelir.

3. Özel Özellikleri Canlandırmak için @property kullanma

Bildiğiniz gibi, CSS'deki tüm özellikler canlandırılamaz. Resmi Mozilla belgeleri tüm canlandırılabilir CSS özelliklerinin güncel kaydını tutar. Canlandırılamayan bir özelliği canlandırmak istiyorsanız, en iyi çözümünüz @mülk direktif.

Düğmenizin arka plan rengini doğrusal bir degradeye değiştirerek başlayın:

düğme {
 // diğerCSS
arka plan: doğrusal gradyan(90derece, mavi, yeşil);
 // diğerCSS
}

İşte çıktı:

Çoğu zaman düğmedeki renk gradyanını canlandırmak istersiniz. Degradenizi hareket ettirmek için kullanabileceğiniz hileler olsa da, onu gerçekten canlandıramazsınız. Bunun nedeni ise arka plan (birlikte arka plan görüntüsü) canlandırılabilir bir özellik değildir. burası @mülk içeri gelir.

bu @mülk yönergesi, özel özellikleri kaydetmenize olanak tanır. kullandığınızda @mülk, ona üç değer sağlamanız gerekir, yani sözdizimi, miras alır, Ve başlangıç ​​değeri:

@mülk --renk-1 {
sözdizimi: "<renk>";
miras alır: doğru;
başlangıç ​​değeri: kırmızı;
}
@mülk --renk-2 {
sözdizimi: "<renk>";
miras alır: doğru;
başlangıç ​​değeri: mavi;
}

Birincisi başlangıç ​​özelliği, ikincisi ise hedef özelliğidir. Şimdi, (geçiş yapamayacağınız) bir arka plan görüntüsünün geçişini yapmak yerine, --renk-1 ile --renk-2 (özel özellikleriniz) bir saniyede:

düğme {
geçiş: --renk-1 1000Hanım, --renk-2 1000Hanım;
}

Bu teknik faydalıdır çünkü başka özelleştirmeler de ekleyebilirsiniz. Örneğin, daha akıcı bir deneyim sunmak için bir gecikme eklersiniz. İmkanlar sonsuzdur.

4. Negatif Animasyon Gecikmelerini Kullanma

Animasyon gecikmeleri, düzgün animasyonlar oluşturmak için çok önemlidir. Bunun bir örneğini iş başında görelim. Bu bölümde, bir ekleyin div düğmenin üstünde 15 nokta bulunan öğe:

<divsınıf="noktalar">
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
<divsınıf="nokta">div>
div>

İşte her çocuğu dönüştürmek için bazı temel stiller div bir noktaya:

.noktalar {
görüntülemek: esnek;
açıklık: .5rem;
kenar boşluğu: 20piksel;
}
.nokta {
Genişlik: 10piksel;
en-boy oranı: 1;
arka plan rengi: kırmızı;
sınır yarıçapı: 50%;
}

Burada noktaları yatay bir çizgiye yerleştirmek için Flexbox kullanıyoruz. Flexbox'a derinlemesine dalmak için, bizim kontrol edebilirsiniz CSS Flexbox öğreticisi.

İçeri komut dosyası.js, noktaların animasyonunu tetikleyen kodu ekleyin. değiştiriyorsun dans noktalardaki sınıf:

button.addEventListener("tıklamak", (e) => {
 button.classList.toggle('Parti zamanı')
// Yeni kod
 noktalar.her biri için((nokta) => {
 dot.classList.toggle('dans')
 })
})

Dans sınıfı, başlıklı bir animasyonu etkinleştirir. yükselmek:

.nokta.dans {
animasyon: yükselmek 2000Hanımsonsuzalternatif;
}

Animasyona gelince, -100px noktalarını Y ekseni boyunca çevirin:

@keyframes yükselmek {
 100% {
dönüştürmek: çevirY(-100 piksel)
 }
}

Şimdi ilginç bir şey yapma zamanı. Noktaların aynı anda yükselmesi yerine, noktaların bir dalga gibi akmasını canlandırmak istiyorsunuz. Bunu başarmak için ekleyeceğiniz animasyon gecikmesi noktalara bölün ve her noktayı 100ms artırın:

.nokta:nth-child (1) {
animasyon gecikmesi: 100Hanım;
}
.nokta:nth-child (2) {
animasyon gecikmesi: 200Hanım;
}
.nokta:nth-child (3) {
animasyon gecikmesi: 300Hanım;
}
.nokta:nth-child (4) {
animasyon gecikmesi: 400Hanım;
}
/* 15. noktaya ulaşana kadar yapmaya devam edin */

Bu, noktaların dalgalı bir biçimde yukarı ve aşağı hareket ettiği şık bir animasyon oluşturur. Aşağıdaki görüntü, animasyonun ortasındaki noktaları yakalar:

Bunun sorunlu olabileceğini unutmayın, bu da bizi beşinci ipucuna getiriyor.

5. Tercihleri ​​Etkinleştirmek için tercih edilen azaltılmış hareketi kullanın

Birçok insanın harekete dayalı animasyonları sevmediğini her zaman aklınızda bulundurun. Aslında, çoğu kullanıcının tarayıcıda hareketi kapatabilecek tercihleri ​​vardır. Hareket, duyuların dikkatini dağıtabilir ve ağır vakalarda mide bulantısına yol açabilir.

Neyse ki, animasyonunuzu bir içine sararak bunu kolayca halledebilirsiniz. tercih yok şöyle medya sorgusu:

@medya(tercih-azaltılmış hareket: tercih yok) {
.nokta.dans {
animasyon: yükselmek 2000Hanımsonsuzalternatif;
 }
}

Şimdi etkinleştirecek olsaydın azaltılmış hareketi tercih ediyor animasyon çalışmaz.

Daha Fazla CSS İpuçları ve Püf Noktaları Öğrenin

CSS, animasyonların ve geçişlerin ötesine geçen harika tüyolarla doludur. Örneğin, tüm düzeninizi şık ve duyarlı hale getirmek için ipuçları ve püf noktaları vardır. Uygulamalar, web sitenizi daha ilgi çekici, erişilebilir ve gezinmesi keyifli hale getirmenize yardımcı olabilir. En iyi yüzde birlik CSS geliştiricisi olmak istiyorsanız, elinizde birkaç numara olması çok yardımcı olur.