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

Bölünmüş harf ve kelime animasyonlarının nasıl oluşturulacağına ilişkin temel bir genel bakış.

Adam Argyle

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.

Demo

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:

1. Azaltılmış hareket koşuluna hazırlık değişkenlerini kullanabilirsiniz.
2. Bölünmüş metin yardımcı programlarını şurada hazırlayın: JavaScript'e dokunun.
3. Sayfadaki koşulları ve yardımcı programları düzenleyin yükleyin.
4. CSS geçişlerini ve animasyonlarını yazma girin.

Uygulayacağımız koşullu sonuçların bir önizlemesini aşağıda bulabilirsiniz:

Kullanıcı daha az hareketi tercih ediyor: metin okunabiliyor / bölümlenmemiş

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.

Kullanıcı hareket edebilir, metin birden çok <span> bölümüne bölündü öğeler

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.

Not: Soru: Bölünmüş metin animasyonlarını engellemek için başka ne kullanılmalıdır?

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.

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

Not: Bu demoda sayfanın DOM'sinde JavaScript'teki metni böleceğim. Bir çerçevede veya sunucudaysanız metni oradan öğelere bölebilirsiniz, ancak bunu yaparken saygı çerçevesinde hareket etmenizi öneririz.

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:

1. Hangi öğelerin bölüneceğini bulma
2. 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:

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, başka bir şey yoksa işlem yapın.
3. Bölmek isteyen her öğe için.
   1. Nasıl bölünmek istediklerine göre bunları ayırın.
   2. 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;
  }
}

Amaç: CSS calc(), hesaplamadaki son öğedeki birim türünü kullanır. Yukarıdaki örnekte bu değer 1 ms'dir. Aksi takdirde birimsiz sayıyı animasyonun <time> değerine dönüştürmek için stratejik olarak kullanılır.

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;
}

.

Kelimeler arasındaki boşluğu gösteren Flexbox geliştirici araçları

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

• GitHub'daki GUI Yarışmaları kaynağı
• Bölme metin Codepen başlatıcısı

Diğer demolar ve ilham verici içerikler

• Metin Codepen koleksiyonunu bölme
• Splitting.js

Topluluk remiksleri

• gnehcwu tarafından CodeSandbox'ta <text-hover> web bileşeni