Metni CSS ile Yol Boyunca Konumlandırma

Faydalı Alternatif Metin Yazma

ile oynuyordum CSS Hareket Yolu son birkaç ayda çokça ve bazılarını bulabileceğiniz demolar oluştururken çok eğlendim bu Codepen koleksiyonu. Ancak “Hareket Yolu” adı sadece hareketle ilgili olmadığı için biraz yanıltıcıdır. Aslında, belirtim hala “Hareket Yolu” adıyla geçse de, yolu tanımlamak için kullanılan özellik şu şekilde değiştirildi: motion-path ile offset-path. Nedenini görmek kolaydır: bir öğe yol boyunca herhangi bir yere yerleştirilebilir. veya onsuz hareket – konumu (veya offset-distance value) animasyonlu olması gerekmez.

Aşağıdaki demoda (bir @arılarandbombs GIF), dairelerin ölçeği ve opaklığı canlandırılmıştır, ancak hareket yanılsamasına rağmen konumları aslında sabittir. Ancak, her biri dairesel bir yol boyunca konumlandırılmıştır. offset-path ve offset-distance.

Kalemi Gör Houdini ve Splitting JS ile öteleme yolu animasyonlu daireler Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

(Ayrıca bir conic-gradient ile animasyonlu maske CSS Houdini – efekti görmek için Chrome’da görüntülemeniz gerekir.)

Bu sabit öğeleri bir yol boyunca konumlandırma yeteneği, metne iyi uyum sağlar. Geçen yıl, dönüşümleri kullanarak metni bir daire etrafında konumlandırmak için CSS özel özelliklerini kullandığım bazı demolar oluşturdum. Bu örnek kullanır Splitting.js (en sevdiğim JS kitaplığım!) (Bu konuda daha sonra.)

Kalemi Gör CSS değişkenleri + Splitting.js ve değişken tip içeren bir daire içindeki metin Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Dinamik içerikle harika çalışır – metni değiştirebilirsiniz ve metnin çevreye mükemmel şekilde uyması için her karakterin konumu yeniden hesaplanır. Ancak bir dezavantajı var: Metin seçilemez, çünkü mutlak konumlandırma ve dönüşüm kullanır.

Kurtarmaya giden hareket yolu

bunun yerine kullanırsak offset-pathhesaplanması offset-distance Özel özellikleri kullanarak her karakter için değer, tamamen seçilebilir metinle aynı efekti elde edebiliriz! Güzel!

Kalemi Gör Ofset yolu olan bir daire içindeki metin Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Ne yazık ki, yazı yazarken, desteklenen tek offset-path değer bir path() işlev. Bu, yol ölçeklenmediğinden duyarlı bir şekilde oluşturmayı kolaylaştırmaz. Ancak, farklı kesme noktaları için farklı yol değerleri belirtmek üzere medya sorgularını kullanmak gibi seçenekler de vardır. Alternatif olarak, her şeyi daha küçük ekranlarda küçültmek için dönüşümleri kullanabiliriz. Ancak bu seçeneklerin hiçbiri ideal değildir. Bir SVG yolu URL’si kullanabilseydik (belirtimde belirtildiği gibi), bu çok daha ayrıntılı kontrole izin verirdi.

Yol oluşturma hakkında bir kelime

belirlemek için tercih ettiğim yol offset-path değer, yolu Illustrator’da çizmek ve bir optimizasyon aracıyla temizlemeden ve elde edilen yolun d nitelik değeri. Basitçe bir daire çizerseniz, Illustrator bunu bir daire olarak kaydeder. <circle> bir yol yerine öğe. Bunu önlemenin bir yolu, önce daireyi çizmek, ardından dairenin yolunu istenen konumda kesmek için Illustrator’daki makas aracını kullanmaktır. Daha sonra bir olarak kaydedilecek <path> yerine bir <circle> öğe.

Tabii ki, çevrelerle sınırlı değiliz. Seçtiğimiz herhangi bir yolu kullanabiliriz.

Evet, metni de canlandırabiliriz

Animasyon, bu tekniklerin gerçekten parladığı yerdir. canlandırabiliriz offset-distance metin dizesini yol boyunca taşımak için. En sevdiğim tekniklerden biri kullanmaktır. animation-delay özel özelliklerden hesaplanan değerlerle. Splitting.js, her karaktere dizinine karşılık gelen özel bir özellik atar. Bunu bir içine geçirmek calc işlev, gevşemenin etkilerine benzer şekilde daha organik bir hareketle sonuçlanır. Aşağıdaki iki animasyonda farkı görebilirsiniz. İkinci animasyon bir animation-delay her karakterde, özel özellikler kullanılarak hesaplanır:

.char {
--delay: calc(var(--char-index) * 30ms);
}

Kalemi Gör Gecikmeli/gecikmesiz ofset yolu animasyonunu karşılaştırma Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bununla yaşanacak çok fazla eğlence var. Aşağıdaki demo, bir rollercoaster efekti oluşturmak için burada açıklanan teknikleri kullanır:

Kalemi Gör yazım hatası Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Daha da tuhaflaşabilir ve animasyonumuza bazı 3B dönüşümler ekleyebiliriz:

Kalemi Gör Bölme ve hareket yolu Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Umarım Motion Path ile oynamaktan benim kadar zevk alırsınız!

Bir cevap yazın

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