Bölünmüş harf ve kelime animasyonlarının nasıl oluşturulacağına ilişkin temel bir genel bakış.
Bu gönderide, bölünmüş metin animasyonlarını çözme ve Web için minimum düzeyde, erişilebilir ve farklı tarayıcılarda çalışan etkileşimler. Demoyu deneyin.
Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:
Genel Bakış
Bölünmüş metin animasyonları muhteşem olabilir. Her aşamanın küçük bir kısmını yardımcı olmakla birlikte, mizahi öğeler oluşturmak için üzerine düşünün. Amaç, animasyonları aşamalı olarak sunmaktır. Metin, kullanıcının varsayılan olarak ayarlanır. Bölünmüş metin hareket efektleri kullanımı yıkıcı ve rahatsız edici olabilir. Bu nedenle, yalnızca HTML'yi veya kullanıcı hareket ediyorsa hareket stilleri uygular.
Aşağıda iş akışına ve sonuçlara ilişkin genel bir bakış yer almaktadır:
- Azaltılmış hareket koşuluna hazırlık değişkenlerini kullanabilirsiniz.
- Bölünmüş metin yardımcı programlarını şurada hazırlayın: JavaScript'e dokunun.
- Sayfadaki koşulları ve yardımcı programları düzenleyin yükleyin.
- CSS geçişlerini ve animasyonlarını yazma girin.
Uygulayacağımız koşullu sonuçların bir önizlemesini aşağıda bulabilirsiniz:
![Öğeler paneli açık ve hareket "azalt" olarak ayarlanmış Chrome geliştirici araçlarının ekran görüntüsü h1 ise ayrılmamış olarak gösterilir](https://web.dev/static/articles/building/split-text-animations/image/screenshot-the-chrome-de-65fd5b490f405.png?authuser=5&hl=tr)
Kullanıcı daha az hareketi tercih ederse, HTML belgesini olduğu gibi bırakırız ve animasyon ekler. Hareket olması normalse, malzemelerini küçük parçalara ayırırız. Buradan JavaScript metni harfe göre böldükten sonra HTML önizlemesi.
![Öğeler paneli açık ve hareket "azalt" olarak ayarlanmış Chrome geliştirici araçlarının ekran görüntüsü h1 ise ayrılmamış olarak gösterilir](https://web.dev/static/articles/building/split-text-animations/image/screenshot-the-chrome-de-fd950f1664ff6.png?authuser=5&hl=tr)
Hareket koşullarını hazırlama
Mevcut @media
(prefers-reduced-motion: reduce)
medya sorgusu CSS'den kullanılacaktır
Bu projedeki JavaScript. Bu medya sorgusu, şunun için birincil koşulumuzdur:
karar vermekten ibaret değildir. CSS medya sorgusu, bekletme için kullanılır
geçişleri ve animasyonları içerirken, JavaScript medya sorgusu ise
HTML manipülasyonunu durdurabilirsiniz.
Koşullu CSS'yi hazırlama
Medya Sorguları Düzey 5'in söz dizimini etkinleştirmek için PostCSS'yi kullandım. medya sorgusu boole'sini değişkene dönüştürür:
@custom-media --motionOK (prefers-reduced-motion: no-preference);
JS koşullarını hazırlama
JavaScript'te, tarayıcı medya sorgularını kontrol etmek için bir yol sağlar. yapılandırma değerini girin:
const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
Daha sonra, motionOK
için test edebilirim ve dokümanı yalnızca kullanıcı değişiklik yapmamışsa
hareket azaltmayı talep etti.
if (motionOK) {
// document split manipulations
}
Aynı değeri, PostCSS kullanarak @nest
söz dizimini etkinleştirerek kontrol edebilirim
İç içe yerleştirme taslağı 1. Bu sayede
için, animasyonla ilgili tüm mantığı ve onun stil gereksinimlerini
hem de çocuklar için aynı yerde:
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
PostCSS özel özelliği ve bir JavaScript boole değeri ile efektini koşullu olarak yükseltebilirsiniz. Böylece, sizi daha önce gördüğümüz dizeleri öğelere dönüştürmek için JavaScript'i ayırmayı sağlar.
Metin Bölme
Metindeki harfler, kelimeler, satırlar vb. CSS veya JS ile ayrı ayrı canlandırılamaz. Efekti elde etmek için kutulara ihtiyacımız var. Her bir harfi canlandırmak istersek her harf bir öğe olmalıdır. Her bir kelimeye animasyon eklemek istersek öğesinin öğe olması gerekir.
- Dizeleri öğelere bölmek için JavaScript yardımcı program işlevleri oluşturma
- Bu yardımcı programların kullanımını düzenleyin
Harfleri bölme yardımcı işlevi
Başlamak için en uygun yöntem, dizeyi her bir dizeyi döndüren harfini ifade eder.
export const byLetter = text =>
[...text].map(span)
İlgili içeriği oluşturmak için kullanılan yaygın bu hızlı bir görev haline geldi.
Kelimeleri bölme yardımcı işlevi
Harfleri bölmeye benzer şekilde, bu işlev bir dize alır ve her kelimeyi döndürür hesaplamanız gerekir.
export const byWord = text =>
text.split(' ').map(span)
İlgili içeriği oluşturmak için kullanılan
split()
yöntemi aracılığıyla hangi karakterleri dilim alacağını belirtebiliriz.
Kelimelerin bölündüğünü gösteren boş bir boşluk geçti.
Kutular yardımcı işlevi oluşturma
Bu efekt her harf için kutular gerektirir. Bu işlevlerde
map()
bir span()
işleviyle çağrılıyor. span()
işlevi aşağıdaki gibidir.
const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}
--index
adlı özel özelliğin
dizi konumu. Harf animasyonları için kutular kullanmak harika olsa da,
CSS'de kullanılacak bir dizine sahip olmak büyük etki yaratan görünüşte küçük bir eklemedir.
Bu büyük etkide en çok dikkat çeken unsur,
sürekli.
Aşamalı sunum için --index
animasyonları dengelemenin bir yolu olarak kullanabileceğiz
görün.
Yardımcı hizmetler sonucu
splitting.js
modülünün tamamlandığı tarih:
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)
Ardından, bu byLetter()
ve byWord()
işlevlerini içe aktarıp kullanın.
Bölünmüş düzenleme
Bölme yardımcı programları kullanıma hazır olduğunda, hepsini bir araya getirirsek:
- Hangi öğelerin bölüneceğini bulma
- Metinleri bölme ve metni HTML ile değiştirme
Bundan sonra CSS devralmayı ve öğelerin / kutuların animasyonunu başlatır.
Nesneleri Bulma
İstediğim konu ile ilgili bilgileri saklamak için özellikleri ve değerleri kullanmayı seçtim
animasyon ve metnin nasıl bölüneceği. Bu faydalı seçenekleri
yapıştırırsınız. split-by
özelliği,
öğeler ve harfler veya kelimeler için kutular oluşturun. Özellik
Öğe hedeflemek için CSS'deki letter-animation
veya word-animation
kullanılır
dönüştürme ve animasyon uygulama.
Aşağıda, iki özelliği gösteren bir HTML örneği verilmiştir:
<h1 split-by="letter" letter-animation="breath">animated letters</h1>
<h1 split-by="word" word-animation="trampoline">hover the words</h1>
JavaScript'ten öğe bulma
Kullandığım özelliklerin listesini bir araya getirmek için metinlerinin bölünmesini isteyen öğeler:
const splitTargets = document.querySelectorAll('[split-by]')
CSS'den öğe bulma
Ayrıca, tüm harf animasyonlarını göstermek için CSS'deki özellik varlığı seçiciyi de kullandım emin olun. Daha sonra, daha spesifik bilgiler eklemek için özellik değerini kullanacağız farklı stilleri de kullanır.
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
Metin bölünüyor
JavaScript'te bulduğumuz her bir bölünmüş hedef için metinlerini
özelliği değerine göre belirleyin ve her dizeyi bir <span>
ile eşleyin. Google'da
daha sonra, öğenin metnini yaptığımız kutularla değiştirin:
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)
}
})
Düzenleme sonucu
index.js
tamamlandı:
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 şu İngilizce dilinde okunabilir:
- Bazı yardımcı yardımcı program işlevlerini içe aktarın.
- Bu kullanıcı için hareketin uygun olup olmadığını kontrol edin, başka bir şey yoksa işlem yapın.
- Bölmek isteyen her öğe için.
- Nasıl bölünmek istediklerine göre bunları ayırın.
- Metni öğelerle değiştirin.
Animasyonları ve geçişleri bölme
Yukarıdaki bölme doküman manipülasyonu, şu anda birçok yardımcı olabilir. Birkaç bağlantı var okuyun.
Bununla neler yapabileceğinizi gösterin! CSS tabanlı 4 animasyon paylaşacağım ve oluşturabilirsiniz. 🤓
Harfleri böl
Bölünmüş harf efektlerinin temeli olarak aşağıdaki CSS'nin
yararlı olur. Tüm geçişleri ve animasyonları hareketli medya sorgusunun arkasına koyuyorum ve
sonra her yeni alt harfe span
bir görüntüleme özelliği ve bu öğe için bir stil verin
Bunun için şunları yapın:
[letter-animation] > span {
display: inline-block;
white-space: break-spaces;
}
Boşlukların yalnızca boşluktan oluşan aralıkları olması açısından, boşluk stili önemlidir. tarafından daraltılmaz. Şimdi durum bilgili ve eğlenceli konulara geçelim.
Geçiş harflerini bölme örneği
Bu örnekte, bölünmüş metin efekti için CSS geçişleri kullanılmaktadır. Geçişlerde motorda animasyon için gereken durumlara ihtiyaç duyuyorum ve üç durum seçtim: fareyle bir harfin üzerine gelin.
Kullanıcı cümlenin üzerine, yani kapsayıcının üzerine geldiğinde, sanki kullanıcı tarafından daha uzağa itilmiş gibi kullanılabilir. Ardından, kullanıcı fareyle bir öne çıkarıyorum.
@media (--motionOK) {
[letter-animation="hover"] {
&:hover > span {
transform: scale(.75);
}
& > span {
transition: transform .3s ease;
cursor: pointer;
&:hover {
transform: scale(1.25);
}
}
}
}
Harfleri bölme animasyon örneği
Bu örnekte, her birine sonsuz animasyon eklemek için önceden tanımlanmış bir @keyframe
animasyonu kullanılmaktadır
harf ve satır içi özel özellik dizininden faydalanarak
etkisi.
@media (--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;
}
}
Kelimeleri bölme
Flexbox, bu örneklerde benim için bir container türü olarak çalıştı.
ch
birimini sağlıklı bir boşluk uzunluğu olarak değerlendiriyoruz.
word-animation {
display: inline-flex;
flex-wrap: wrap;
gap: 1ch;
}
.
Geçiş bölümü kelime örneği
Bu geçiş örneğinde tekrar fareyle üzerine gelin. Efekt ilk başta üzerine geldikten sonra, etkileşim ve stillerin yalnızca cihazın üzerine gelme yeteneği olsaydı.
@media (hover) {
[word-animation="hover"] {
overflow: hidden;
overflow: clip;
& > span {
transition: transform .3s ease;
cursor: pointer;
&:not(:hover) {
transform: translateY(50%);
}
}
}
}
Bölünmüş kelime animasyonu örneği
Bu animasyon örneğinde, kademeli bir alan oluşturmak için CSS @keyframes
'yi tekrar kullanıyorum.
normal bir metin paragrafında sonsuz animasyon.
[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;
}
}
Sonuç
Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? 🙂
Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Bir Codepen oluşturun ya da kendi demonuzu yayınlayın, tweet'le bize gönderin, ben de bunu Topluluk remiksleri bölümünü aşağıda bulabilirsiniz.
Kaynak
Diğer demolar ve ilham verici içerikler
Topluluk remiksleri
- gnehcwu tarafından CodeSandbox'ta
<text-hover>
web bileşeni