Tworzenie animacji podzielonego tekstu

Podstawowe omówienie tworzenia animacji liter i słów.

Adam Argyle

W tym poście przedstawię sposoby radzenia sobie z podzielonymi animacjami tekstowymi i które są ograniczone, dostępne i działają w różnych przeglądarkach. Zobacz prezentację.

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

Dzielone animacje tekstu mogą być niesamowite. Lekkie drapanie się po powierzchni w tym poście, ale stanowi podstawę do stworzenia w dniu. Celem jest stopniowe wyświetlanie animacji. Tekst powinien być czytelny dla z animacją na pierwszym planie. Efekty ruchu podzielonego tekstu mogą są ekstrawaganckie i potencjalnie uciążliwe, więc będziemy manipulować tylko kodem HTML. zastosuj style ruchu, jeśli użytkownikowi nie przeszkadza ruch.

Oto ogólny opis przepływu pracy i wyników:

1. Przygotuj warunkowe ograniczenie ruchu dla arkuszy CSS i JS.
2. Przygotuj narzędzia do podziału tekstu w JavaScriptu.
3. Dopracuj warunki i narzędzia na stronie. strony.
4. Zapisz przejścia i animacje CSS. dla liter i słów (część rada!).

Oto podgląd wyników warunkowych:

Jeśli użytkownik preferuje ograniczenie ruchu, pozostawiamy dokument HTML bez zmian i nie animację. Jeśli ruch jest prawidłowy, dzielimy go na kawałki. Oto podgląd kodu HTML po tym, jak kod JavaScript podzieli tekst według litery.

Przygotowuję warunkowe ruchy

Dostępne zapytanie o media @media (prefers-reduced-motion: reduce) zostanie użyte z CSS i JavaScript w tym projekcie. To zapytanie o media to podstawowy warunek o podzieleniu tekstu lub nie. Zapytanie o media CSS będzie używane do wstrzymania przejścia i animacje, natomiast zapytanie o media w JavaScripcie będzie służyć do wstrzymywać manipulacje HTML.

Przygotowywanie warunkowego CSS

Użyłem PostCSS, aby włączyć składnię zapytań o media na poziomie 5, gdzie mogę zapisywać wartość logiczną zapytania o media do zmiennej:

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

Przygotowywanie warunkowego JS

W JavaScripcie przeglądarka pozwala sprawdzić zapytania o media, niszczenie aby wyodrębnić wynik logiczny ze sprawdzania zapytania o media i zmienić jego nazwę:

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

Mogę wtedy przetestować dokument pod kątem motionOK i zmienić go tylko wtedy, gdy użytkownik nie poproszono o ograniczenie ruchu.

if (motionOK) {
  // document split manipulations
}

Mogę sprawdzić tę samą wartość, używając PostCSS, aby włączyć składnię @nest z Umieszczanie wersji roboczej 1 w projekcie. Dzięki temu mogę przechowują logikę animacji i jej wymagania dotyczące stylu w jednym miejscu:

letter-animation {
  @media (--motionOK) {
    /* animation styles */
  }
}

Dzięki właściwości niestandardowej PostCSS i wartości logicznej JavaScript możemy warunkowo ulepsz efekt. W ten sposób przejdziemy do następnej sekcji, podzielić kod JavaScriptu służący do przekształcania ciągów znaków w elementy.

Dzielenie tekstu

Litery, słowa, linie tekstu itp. nie mogą być animowane za pomocą CSS ani JS. Aby uzyskać ten efekt, potrzebujemy pudełek. Jeśli chcemy animować każdą literę, każda litera musi być elementem. Jeśli chcemy animować każde słowo, musi być elementem.

1. Tworzenie funkcji narzędziowych JavaScript do dzielenia ciągów znaków na elementy
2. Zarządzaj korzystaniem z tych narzędzi

Funkcja dzielenia liter

Warto zacząć od funkcji, która pobiera ciąg znaków i zwraca każdy litera w tablicy.

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

rozprzestrzeniany w języku ES6, uczyniło to szybkie zadanie.

Funkcja dzielenia słów

Podobnie jak w przypadku dzielenia liter, ta funkcja pobiera ciąg znaków i zwraca każde słowo w tablicy.

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

split() w ciągach JavaScript pozwala określić znaki, które mamy wyciąć. Pominęłam pustą spację, która wskazuje na rozbicie między słowami.

Tworzenie funkcji pudełek

Efekt wymaga ramek dla każdej litery. W przypadku tych funkcji widzimy, że map() jest wywoływana za pomocą funkcji span(). Oto funkcja span().

const span = (text, index) => {
  const node = document.createElement('span')

  node.textContent = text
  node.style.setProperty('--index', index)

  return node
}

Pamiętaj, że właściwość niestandardowa o nazwie --index została ustawiona za pomocą pozycji tablicy. Świetnie jest mieć pudełka na animacje z listami, wykorzystanie indeksu w arkuszach CSS to pozornie niewielka zmiana, która ma duże znaczenie. W tak dużym stopniu oddziałuje on na to, rozbijanie się. Będziemy mogli użyć --index jako sposobu zrównoważenia animacji w animacjach patrz.

Wniosek dotyczący wykorzystania usług komunalnych

Ukończony moduł splitting.js:

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)

Kolejny krok to importowanie i używanie funkcji byLetter() i byWord().

Podzielona administracja

Masz już gotowe do użycia narzędzia, dzięki którym możesz:

1. Określanie, które elementy należy podzielić
2. podział i zastępowanie tekstu kodem HTML;

Następnie CSS przejmuje kontrolę i animuje elementy / pola.

Elementy znalezione

Wybrałem(-am) atrybuty i wartości do przechowywania informacji o odpowiednich i sposobach dzielenia tekstu. Podobały mi się te opcje deklaratywne w kodzie HTML. Atrybut split-by jest używany w JavaScripcie do znajdowania i tworzą pola dla liter lub słów. Atrybut Do elementu docelowego użyto atrybutu letter-animation lub word-animation z CSS a także stosować przekształcenia i animacje.

Oto przykład kodu HTML przedstawiającego 2 atrybuty:

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

Znajdowanie elementów z JavaScriptu

Użyłem składni selektora CSS do określania obecności atrybutów, by zebrać listę elementów, w których tekst ma zostać podzielony:

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

Znajdowanie elementów z CSS

Użyłem też selektora obecności atrybutu w CSS, aby stworzyć animacje z literami te same style podstawowe. Później użyjemy wartości atrybutu, aby dodać w celu uzyskania konkretnego efektu.

letter-animation {
  @media (--motionOK) {
    /* animation styles */
  }
}

Dzielenie tekstu na miejsce

Tekst każdego z dzielonych celów w języku JavaScript dzielimy na podstawie wartości atrybutu i zmapuj każdy ciąg na obiekt <span>. Możemy a następnie zastąp tekst tego elementu utworzonymi przez nas polami:

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

Zakończenie administrowania

index.js w całości:

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

Fragment kodu JavaScript można odczytać w języku angielskim:

1. Zaimportuj kilka funkcji narzędzia pomocniczego.
2. Sprawdź, czy ruch jest w porządku, a jeśli nie, nie rób nic.
3. Pod kątem każdego elementu, który chcesz podzielić.
   1. Podziel je według sposobu podziału.
   2. Zastępowanie tekstu elementami.

Dzielenie animacji i przejść

Powyższa manipulacja dokumentami odblokowała wiele potencjalnych animacji i efektów w języku CSS lub JavaScript. Jest kilka linków na dole tego artykułu, aby znaleźć inspirację do podziału.

Czas pokazać, co potrafisz! udostępnię 4 animacje oparte na CSS. przejścia. 🤓

Dzielenie liter

Jako podstawę efektów dzielenia liter stwierdziłem, że poniższy kod CSS pomocne. Wszystkie przejścia i animacje umieszczam w zapytaniu o multimedia związane z ruchem. następnie przypisz każdej nowej literze podrzędnej span właściwość wyświetlania oraz styl określający, co ze spacjami:

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

Styl spacji jest ważny, ponieważ rozpiętości, które są tylko spacjami, nie są zwinięte przez mechanizm układu. A teraz czas na coś przyjemnego.

Przykład przejścia z liter podziału

W tym przykładzie użyto przejścia CSS do efektu podzielonego tekstu. Przejścia między nimi potrzebne są stany animacji. Wybrałem 3 stany: nie najechać, najedź na zdanie, najechać na literę.

Gdy użytkownik najedzie kursorem na zdanie, czyli kontener, skaluję wszystkie jakby użytkownik odpychał je dalej. Następnie, gdy użytkownik najedzie kursorem na chcę ją wyświetlić.

@media (--motionOK) {
  [letter-animation="hover"] {
    &:hover > span {
      transform: scale(.75);
    }

    & > span {
      transition: transform .3s ease;
      cursor: pointer;

      &:hover {
        transform: scale(1.25);
      }
    }
  }
}

Przykład animowanego podziału liter

W tym przykładzie użyto wstępnie zdefiniowanej animacji @keyframe do nieskończonej animacji litery i wykorzystuje wbudowany indeks właściwości niestandardowych do utworzenia etapu efektu.

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

Podziel na słowa

Flexbox w tych przykładach dobrze sprawdza się jako typ kontenera wykorzystując jednostkę ch jako prawidłową długość luki.

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

Przykład przejścia między słowami podziału

W tym przykładzie przejścia ponownie używam opcji najeżdżania kursorem. Gdy efekt początkowo ukrywa do momentu najechania kursorem myszy były stosowane tylko interakcje i style czy można było najechać kursorem.

@media (hover) {
  [word-animation="hover"] {
    overflow: hidden;
    overflow: clip;

    & > span {
      transition: transform .3s ease;
      cursor: pointer;

      &:not(:hover) {
        transform: translateY(50%);
      }
    }
  }
}

Przykład animacji dzielenia słów

W tej przykładowej animacji ponownie używam CSS @keyframes, by utworzyć rozłożenie w czasie nieskończona animacja na zwykłym akapicie tekstu.

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

Podsumowanie

Skoro już wiesz, jak to robię, jak Ty?! 🙂

Stosujmy różne podejścia i poznajmy sposoby budowania obecności w internecie. Utwórz Codepen lub poprowadź własną prezentację i wyślij do mnie tweeta, a dodam ją do Remiksy przez społeczność znajdują się poniżej.

Źródło

• Źródło wyzwań GUI w GitHubie
• Podział tekstu – polecenie inicjujące w Codepen

Więcej prezentacji i inspiracji

• Dzielenie kolekcji tekstu Codepen
• Splitting.js

Remiksy utworzone przez społeczność

• Komponent internetowy <text-hover> autorstwa gnehcwu w aplikacji CodeSandbox