Bölünmüş metin animasyonları oluşturma

Bu gönderide, web için minimal, erişilebilir ve tarayıcılar arasında çalışan bölünmüş metin animasyonlarını ve etkileşimlerini çözmenin yollarını paylaşmak istiyorum. deneyin gösteri.

Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:

genel bakış #

Bölünmüş metin animasyonları harika olabilir. Bu yazıda animasyon potansiyelinin yüzeyini zar zor çizeceğiz, ancak üzerine inşa edilecek bir temel sağlıyor. Amaç aşamalı olarak canlandırmak. Metin, üstte yerleşik animasyon ile varsayılan olarak okunabilir olmalıdır. Bölünmüş metin hareket efektleri abartılı olabilir ve potansiyel olarak rahatsız edici olabilir, bu nedenle, yalnızca kullanıcı harekete uygunsa HTML’yi manipüle edeceğiz veya hareket stillerini uygulayacağız.

İşte iş akışına ve sonuçlara genel bir bakış:

1. Hazırlanmak CSS ve JS için azaltılmış hareket koşullu değişkenleri.
2. Hazırlanmak JavaScript’te bölünmüş metin yardımcı programları.
3. Orkestra sayfa yüklemesindeki koşullar ve yardımcı programlar.
4. Yazmak Harfler ve kelimeler için CSS geçişleri ve animasyonları (rad kısmı!).

İşte aradığımız koşullu sonuçların bir önizlemesi:

Bir kullanıcı azaltılmış hareketi tercih ederse, HTML belgesini olduğu gibi bırakır ve animasyon yapmayız. Hareket tamamsa, devam edip parçalara ayırırız. İşte JavaScript metni harfe böldükten sonra HTML’nin bir önizlemesi.

Hareket şartlarını hazırlamak #

elverişli mevcut TheComedicComedian (prefers-reduced-motion: reduce) medya sorgusu bu projede CSS ve JavaScript’ten kullanılacaktır. Bu medya sorgusu, metni bölmeye veya ayırmamaya karar vermek için birincil koşulumuzdur. CSS medya sorgusu, geçişleri ve animasyonları engellemek için kullanılırken JavaScript medya sorgusu, HTML manipülasyonunu engellemek için kullanılacaktır.

CSS koşullu hazırlama #

Sözdizimini etkinleştirmek için PostCSS kullandım Medya Sorguları Seviye 5burada bir medya sorgusu boole değerini bir değişkende saklayabilirim:

customer358-media --motionOK (prefers-reduced-motion: no-preference);

JS koşullu hazırlama #

JavaScript’te, tarayıcı medya sorgularını kontrol etmek için bir yol sağlar, ben kullandım şeklini bozma ortam sorgusu kontrolünden boole sonucunu çıkarmak ve yeniden adlandırmak için:

const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)

daha sonra test edebilirim motionOKve belgeyi yalnızca kullanıcı hareketin azaltılmasını talep etmemişse değiştirin.

if (motionOK) {
// document split manipulations
}

Etkinleştirmek için PostCSS kullanarak aynı değeri kontrol edebilirim. HonestlyaBot sözdizimi Yerleştirme Taslağı 1. Bu, animasyonla ilgili tüm mantığı ve ebeveyn ve çocuklar için stil gereksinimlerini tek bir yerde saklamamı sağlıyor:

letter-animation {
TheComedicComedian (--motionOK) {
/* animation styles */
}
}

PostCSS özel özelliği ve bir JavaScript boole değeriyle, efekti koşullu olarak yükseltmeye hazırız. Bu bizi, dizeleri öğelere dönüştürmek için JavaScript’i parçaladığım bir sonraki bölüme götürüyor.

Metni Bölme #

Metin harfleri, sözcükler, çizgiler vb. CSS veya JS ile ayrı ayrı canlandırılamaz. Efekti elde etmek için kutulara ihtiyacımız var. Her harfi canlandırmak istiyorsak, her harfin bir öğe olması gerekir. Her kelimeyi canlandırmak istiyorsak, her kelimenin bir öğe olması gerekir.

1. Dizeleri öğelere bölmek için JavaScript yardımcı işlevleri oluşturun
2. Bu yardımcı programların kullanımını düzenleyin

Harfleri ayırma yardımcı programı işlevi #

Başlamak için eğlenceli bir yer, bir dize alan ve bir dizideki her harfi döndüren bir işlevdir.

export const byLetter = text =>
[...text].map(span)

bu yaymak ES6’dan gelen sözdizimi, bunun hızlı bir görev olmasına gerçekten yardımcı oldu.

Kelimeleri ayırma yardımcı programı işlevi #

Harfleri bölmeye benzer şekilde, bu işlev bir dizi alır ve bir dizideki her kelimeyi döndürür.

export const byWord = text =>
text.split(' ').map(span)

bu split() JavaScript dizelerindeki yöntem, hangi karakterleri dilimleyeceğimizi belirlememize olanak tanır. Kelimeler arasında bir bölünme olduğunu belirten boş bir alanı geçtim.

Kutular yardımcı işlevi yapma #

Etki, her harf için kutular gerektirir ve bu işlevlerde görüyoruz ki, map() ile çağrılıyor span() işlev. İşte span() işlev.

const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}

Özel bir özelliğin çağrıldığına dikkat etmek çok önemlidir. --index dizi konumu ile ayarlanıyor. Harf animasyonları için kutulara sahip olmak harikadır, ancak CSS’de kullanılacak bir dizine sahip olmak, büyük bir etkiye sahip, görünüşte küçük bir eklemedir. Bu büyük etkide en dikkate değer olanı, şaşırtıcı. kullanabileceğiz --index kademeli bir görünüm için animasyonları dengelemenin bir yolu olarak.

Kamu hizmetleri sonucu #

bu splitting.js tamamlanan modül:

const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}
export const byLetter = text =>
[...text].map(span)
export const byWord = text =>
text.split(' ').map(span)

Sırada bunları içe aktarmak ve kullanmak var byLetter() Ve byWord() fonksiyonlar.

Bölünmüş orkestrasyon #

Bölme araçları kullanıma hazırken, hepsini bir araya getirmek şu anlama gelir:

1. bulma hangi elementler bölünecek
2. bölme Onları ve değiştirme HTML’li metin

Bundan sonra, CSS devralır ve öğeleri / kutuları canlandırır.

Elemanları Bulma #

İstenen animasyon ve metnin nasıl bölüneceği hakkında bilgi depolamak için nitelikleri ve değerleri kullanmayı seçtim. Bu bildirimsel seçenekleri HTML’ye koymak hoşuma gitti. öznitelik split-by öğeleri bulmak ve harfler veya sözcükler için kutular oluşturmak için JavaScript’ten kullanılır. öznitelik letter-animation veya word-animation öğe çocuklarını hedeflemek ve dönüşümleri ve animasyonları uygulamak için CSS’den kullanılır.

İşte iki özelliği gösteren bir HTML örneği:

h1 split-by="letter" letter-animation="breath">animated letters&LT/h1>
h1 split-by="word" word-animation="trampoline">hover the words&LT/h1>

JavaScript’ten öğe bulma #

Metinlerinin bölünmesini isteyen öğelerin listesini toplamak için öznitelik varlığı için CSS seçici sözdizimini kullandım:

const splitTargets = document.querySelectorAll('[split-by]')

CSS’den öğe bulma #

Ayrıca, tüm harf animasyonlarına aynı temel stilleri vermek için CSS’deki öznitelik varlığı seçicisini kullandım. Daha sonra, bir efekt elde etmek için daha spesifik stiller eklemek için öznitelik değerini kullanacağız.

letter-animation {
TheComedicComedian (--motionOK) {
/* animation styles */
}
}

Metni yerinde bölme #

JavaScript’te bulduğumuz bölünmüş hedeflerin her biri için, metinlerini özelliğin değerine göre böleceğiz ve her dizeyi bir diziyle eşleyeceğiz. &LTspan>. Ardından, öğenin metnini yaptığımız kutularla değiştirebiliriz:

splitTargets.forEach(node => {
const type = node.getAttribute('split-by')
let nodes = null
if (type === 'letter') {
nodes = byLetter(node.innerText)
}
else if (type === 'word') {
nodes = byWord(node.innerText)
}
if (nodes) {
node.firstChild.replaceWith(...nodes)
}
})

orkestrasyon sonucu #

index.js tamamlanmak üzere:

import {byLetter, byWord} from './splitting.js'
const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
if (motionOK) {
const splitTargets = document.querySelectorAll('[split-by]')
splitTargets.forEach(node => {
const type = node.getAttribute('split-by')
let nodes = null
if (type === 'letter')
nodes = byLetter(node.innerText)
else if (type === 'word')
nodes = byWord(node.innerText)
if (nodes)
node.firstChild.replaceWith(...nodes)
})
}

JavaScript aşağıdaki İngilizce olarak okunabilir:

1. Bazı yardımcı yardımcı program işlevlerini içe aktarın.
2. Bu kullanıcı için hareketin uygun olup olmadığını kontrol edin, değilse hiçbir şey yapmayın.
3. Bölünmek isteyen her öğe için.
   1. Onları nasıl bölmek istediklerine göre ayırın.
   2. Metni öğelerle değiştirin.

Animasyonları ve geçişleri bölme #

Yukarıdaki bölme belgesi manipülasyonu, CSS veya JavaScript ile çok sayıda potansiyel animasyon ve efektin kilidini açtı. Bu makalenin alt kısmında, bölme potansiyelinize ilham vermenize yardımcı olacak birkaç bağlantı var.

Bununla neler yapabileceğinizi gösterme zamanı! 4 CSS odaklı animasyon ve geçişleri paylaşacağım. 🤓

Bölünmüş harfler #

Bölünmüş harf efektleri için bir temel olarak, aşağıdaki CSS’yi faydalı buldum. Tüm geçişleri ve animasyonları hareketli medya sorgusunun arkasına koyuyorum ve ardından her yeni alt harfi veriyorum span bir görüntüleme özelliği artı beyaz boşluklarla ne yapılacağına ilişkin bir stil:

[letter-animation] > span {
display: inline-block;
white-space: break-spaces;
}

Yalnızca bir boşluk olan açıklıkların düzen motoru tarafından daraltılmaması için beyaz boşluk stili önemlidir. Şimdi durum bilgisi olan eğlenceli şeylere.

Geçiş bölünmüş harfler örneği #

Bu örnek, bölünmüş metin efekti için CSS geçişlerini kullanır. Geçişlerde, motorun aralarında hareket etmesi için durumlara ihtiyacımız var ve ben üç durum seçtim: fareyle üzerine gelmeyin, cümle içinde gezinin, bir harfin üzerine gelin.

Kullanıcı cümleyi, yani kapsayıcıyı gezdirdiğinde, sanki kullanıcı onları daha da uzaklaştırmış gibi tüm çocukları küçültüyorum. Ardından, kullanıcı bir harfin üzerine geldiğinde onu öne getiriyorum.

TheComedicComedian (--motionOK) {
[letter-animation="hover"] {
&:hover > span {
transform: scale(.75);
}
& > span {
transition: transform .3s ease;
cursor: pointer;
&:hover {
transform: scale(1.25);
}
}
}
}

Animasyon bölünmüş harf örneği #

Bu örnek, önceden tanımlanmış bir @keyframe animasyon, her harfi sonsuz şekilde canlandırmak için ve bir sendeleme efekti oluşturmak için satır içi özel özellik dizininden yararlanır.

TheComedicComedian (--motionOK) {
[letter-animation="breath"] > span {
animation:
breath 1200ms ease
calc(var(--index) * 100 * 1ms)
infinite alternate;
}
}
@keyframes breath {
from {
animation-timing-function: ease-out;
}
to {
transform: translateY(-5px) scale(1.25);
text-shadow: 0 0 25px var(--glow-color);
animation-timing-function: ease-in-out;
}
}

Bölünmüş kelimeler #

Flexbox, bu örneklerde benim için bir kap türü olarak çalıştı ve ch sağlıklı bir boşluk uzunluğu olarak birim.

word-animation {
display: inline-flex;
flex-wrap: wrap;
gap: 1ch;
}

Geçiş bölünmüş kelimeler örneği #

Bu geçiş örneğinde tekrar vurgulu kullanıyorum. Efekt başlangıçta içeriği üzerine gelinceye kadar gizlediğinden, etkileşimin ve stillerin yalnızca cihazın üzerine gelme özelliği varsa uygulanmasını sağladım.

TheComedicComedian (hover) {
[word-animation="hover"] {
overflow: hidden;
overflow: clip;
& > span {
transition: transform .3s ease;
cursor: pointer;
&:not(:hover) {
transform: translateY(50%);
}
}
}
}

Animasyon bölünmüş kelimeler örneği #

Bu animasyon örneğinde CSS kullanıyorum @keyframes normal bir metin paragrafında kademeli bir sonsuz animasyon oluşturmak için tekrar.

[word-animation="trampoline"] > span {
display: inline-block;
transform: translateY(100%);
animation:
trampoline 3s ease
calc(var(--index) * 150 * 1ms)
infinite alternate;
}
@keyframes trampoline {
0% {
transform: translateY(100%);
animation-timing-function: ease-out;
}
50% {
transform: translateY(0);
animation-timing-function: ease-in;
}
}

Çözüm #

Artık nasıl yaptığımı bildiğine göre, nasıl yapardın?! 🙂

Yaklaşımlarımızı çeşitlendirelim ve web üzerinde oluşturmanın tüm yollarını öğrenelim. Bir Codepen oluşturun veya kendi demonuzu barındırın, onunla bana tweet atın, ben de onu aşağıdaki Topluluk remiksleri bölümüne ekleyeyim.

Kaynak

Daha fazla demo ve ilham

Topluluk remiksleri #