CSS ve Splitting JS ile Değişken Font Animasyonu

Faydalı Alternatif Metin Yazma

Kısa bir süre önce üzerinde hareketli bir değişken yazı tipi demosu yaptım. Codepen. Bu yazıda değişken fontların ne olduğunu, CSS ile nasıl canlandırılabileceğini ve CSS ve biraz Javascript ile nasıl nefes efekti oluşturduğumu anlatacağım.

Kalemi Gör Değişken yazı tipi animasyonu Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Değişken yazı tipleriyle tanışın

Değişken yazı tipleri, web tipografisinde heyecan verici yeni gelişmelerdir. Belirli bir yazı tipinin farklı türevlerini yüklemek için birden çok yazı tipi dosyası yerine, değişken yazı tipleri, tüm varyasyonları tek bir dosyadan yüklememizi sağlar. Çoğu durumda bu büyük bir performans kazancıdır (dosya kendi başına normal bir yazı tipi dosyasından daha büyük olma eğiliminde olsa da, bu nedenle gerçekten ihtiyacınız varsa yalnızca değişken bir yazı tipi kullanmak en iyisidir).

Bir yazı tipi, birçok varyasyon

Yalnızca 100’ün katlarında kullanılabilen bir avuç yazı tipi ağırlığı yerine (örn. font-weight: 600), değişken yazı tipleri, tümü tek bir dosyadan bir dizi değer sağlar. Ağırlık, bu aralıkta herhangi bir yerde değiştirilebilir. Yani font-weight: 372 tamamen geçerlidir!

Varyasyon eksenleri

Ağırlık sadece bir varyasyon eksenleri (muhtemelen en yaygın olanı olmasına rağmen). Değişken yazı tipleri de farklı eksenlerle gelebilir. bir dizi var kayıtlı eksenlerdört harfli bir etikete karşılık gelir:

  • ağırlık (wght)
  • Genişlik (wdth)
  • italik (ital)
  • eğik (slnt)
  • optik boyut (opsz)

Bunlar, CSS özelliklerine ve değerlerine karşılık gelir:

  • font-weight
  • font-stretch
  • font-style
  • font-style
  • font-optical-sizing

Tüm değişken yazı tipleri, bu varyasyon eksenlerinin tümünü içermez. Birçoğu sadece bir veya iki tane içerir.

kullanılarak da erişilebilir. font-variation-settings Emlak. Bu özellik, yalnızca standart eksenleri değil, aynı zamanda özel eksenleri de ayarlamamızı sağlar. Yani font-weight iki şekilde belirtilebilir:

font-weight: 372;

veya

font-variation-settings: 'wght' 372;

Özel eksenler

Özel eksenler, tip tasarımcısına yaratıcılık için sonsuz kapsam sağlar! Özel bir varyasyon ekseni, kelimenin tam anlamıyla herhangi bir şey olabilir – bazıları, örneğin x yüksekliğibir yazı tipi için oldukça yaygın olabilir, ancak daha birçok yaratıcı olasılık vardır.

Özel eksenlere şuradan erişilebilir: font-variation-settings özellik, ancak standart eksenleri çizgisiz, dört harfli etiket adları büyük harf olmalıdır. Değişken yazı tipi Hareket NM Type tarafından adlandırılan özel bir eksen sağlar Uzayharf biçimlerinin eğriliğini kontrol eder.

font-variation-settings: 'wght' 200, 'SPAC' 118;

Bu demoda farklı eksenlerle oynamayı deneyin:

Kalemi Gör Hareket değişken yazı tipi Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Değişken bir yazı tipini CSS ile canlandırma

font-variation-settings canlandırılabilir ve 100’lük artışlar yerine bir dizi değeri kapsadığı için, basit CSS geçişleri veya ana kare animasyonlarıyla gerçekten güzel efektler elde edebiliriz. Yazı tipi IBM Plex Sans iki değişkenlik ekseni vardır: ağırlık ve genişlik. Aşağıdaki kod, her iki eksen için 1s döngü animasyonu ayarlar:

h1 {
font-variation-settings: 'wght' 100, 'wdth' 85;
animation: breathe 4000ms infinite forwards;
}

@keyframes breathe {
60% {
font-variation-settings: 'wght' 700, 'wdth' 100;
}

100% {
font-variation-settings: 'wght' 100, 'wdth' 85;
}
}

Bu, metnimizin nefes alıp verme etkisini verir!

Kalemi Gör Değişken yazı tipi animasyonu Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Alternatif olarak, bu, animasyon yerine geçişli güzel bir fareyle üzerine gelme efekti olabilir.

Animasyonu şaşırtmak

Tüm metnimizin aynı hızda canlanması yerine, harf formlarımızın sırayla canlandırılması güzel olabilir. Biz abilir metnimizin her harfini bir <span> ve bir ayarla animation-delay her birinde:

<h1>
<span>B</span>
<span>r</span>
<span>e</span>
<span>a</span>
<span>t</span>
<span>h</span>
<span>i</span>
<span>n</span>
<span>g</span>
</h1>
h1 span:nth-child(2) {
animation-delay: 400ms;
}

h1 span:nth-child(3) {
animation-delay: 800ms;
}

h1 span:nth-child(4) {
animation-delay: 1200ms;
}
/* etc...*/

Bunu yazmak biraz zahmetli olurdu (bize yardım etmesi için Sass’ı kullanabilsek de) ve metin içeriğimizi daha sonraki bir tarihte değiştirmeye karar verirsek, pek sürdürülebilir olmazdı.

Ama biraz Javascript kullanmaktan çekinmezsek, adında harika bir kitaplık var. Splitting.js bunun için mükemmel!

bölme

Splitting’in birincil kullanım durumu, metni canlandırmak içindir, ancak bazı harika efektler için ızgaraları ve mizanpajları bölmek de mümkündür. Kullanmak için kütüphaneyi projemize dahil etmemiz ve ardından bir data-splitting canlandırmak istediğimiz öğenin özniteliği:

<h1 data-splitting>Breathing</h1>

Şimdi yazmamız gereken JS çok basit:

Splitting()

Bölme daha sonra metin öğemizi bir dizi <span>s, her biri bir sınıfa, bir veri özniteliğine ve daha sonra CSS’mizde erişebileceğimiz karakter indeksi değerine sahip özel bir özellik tanımına sahiptir:

<span class="word" data-word="Breathing" style="--word-index:0;">
<span class="char" data-char="B" style="--char-index:0;">B</span>
<span class="char" data-char="r" style="--char-index:1;">r</span>
<span class="char" data-char="e" style="--char-index:2;">e</span>
<span class="char" data-char="a" style="--char-index:3;">a</span>
<span class="char" data-char="t" style="--char-index:4;">t</span>
<span class="char" data-char="h" style="--char-index:5;">h</span>
<span class="char" data-char="i" style="--char-index:6;">i</span>
<span class="char" data-char="n" style="--char-index:7;">n</span>
<span class="char" data-char="g" style="--char-index:8;">g</span>
</span>

Sıralı bir animasyon oluşturmak için kullanabiliriz calc() hesaplamak için animation-delay özel özellikteki her harf için değer:

h1 .char {
--delay: calc((var(--char-index) + 1) * 400ms);
animation: breathe 4000ms infinite both;
animation-delay: var(--delay);
}

Bu, yazmamız gereken CSS’yi büyük ölçüde azaltır ve metni daha sonra değiştirebileceğimiz ve yine de animasyonumuzun mükemmel çalışmasını sağlayabileceğimiz anlamına gelir!

Kaynaklar

MDN’nin Değişken Yazı Tipleri Kılavuzu

MDN kılavuzu, değişken yazı tiplerini ve bunların nasıl kullanılacağını öğrenmek için harika bir kaynaktır.

V-Yazı Tipleri

V-Fonts, varyasyon eksenleri ve bunların nerede bulunacağı da dahil olmak üzere yüzlerce değişken yazı tipinin bir listesidir. Ücretli ve ücretsiz/açık kaynak yazı tiplerinin bir karışımını içerir ve henüz büyük paralar harcamak istemiyorsanız, demolarda kullanmak üzere örnekler bulmak için harika bir yerdir.

Eksen-Praksis

Axis-Praxis, değişken yazı tiplerini denemek ve bazı yaratıcı olasılıkları anlamak için bir oyun alanıdır. Gerçekten ilginç ve yaratıcı örnekler içeriyor!

DeğişkenFonts.dev

Variablefonts.dev tarafından bir projedir Mandy Michaeldeğişken yazı tipleriyle hayranlık uyandıran demolar oluşturması ve tüm dünyada onlar hakkında konuşmasıyla CSS dünyasında tanınan bir isim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.