Animationen für geteilten Text erstellen

Ein grundlegender Überblick über die Erstellung von Animationen zum Aufteilen von Buchstaben und Wörtern.

Adam Argyle

In diesem Beitrag möchte ich Ihnen zeigen, wie Sie geteilte Textanimationen lösen Interaktionen im Web, die minimal, barrierefrei und browserübergreifend funktionieren. Demo ansehen

<ph type="x-smartling-placeholder">
</ph>
Demo

Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:

Übersicht

Split-Text-Animationen können fantastisch sein. Wir werden kaum an der Oberfläche des in diesem Beitrag enthalten, aber er bietet eine Grundlage, auf. Das Ziel ist die schrittweise Animation. Der Text sollte lesbar sein Standard, wobei die Animation darüber liegt. Bewegungseffekte bei geteiltem Text außerordentlich und potenziell störend werden, sodass wir nur HTML manipulieren Bewegungsstile anwenden, wenn die Nutzenden damit einverstanden sind.

Hier ist ein allgemeiner Überblick über den Workflow und die Ergebnisse:

  1. Bedingungen mit reduzierter Bewegung vorbereiten für CSS und JS.
  2. Dienstprogramme zum Aufteilen von Text vorbereiten in JavaScript
  3. Bedingungen und Dienstprogramme auf der Seite Orchestrieren laden.
  4. CSS-Übergänge und -Animationen schreiben nach Buchstaben und Wörtern.

Hier ist eine Vorschau der bedingten Ergebnisse:

<ph type="x-smartling-placeholder">
</ph> Screenshot der Chrome-Entwicklertools mit geöffnetem Steuerfeld „Elemente“ und reduzierter Bewegung mit der Einstellung „Reduzieren“ und h1 wird ungeteilt angezeigt. <ph type="x-smartling-placeholder">
</ph> Der Nutzer bevorzugt kleinere Bewegungen, da der Text gut lesbar ist.

Möchte ein Nutzer reduzierte Bewegungselemente, lassen wir das HTML-Dokument unverändert und Animation. Wenn Bewegung in Ordnung ist, schneiden wir sie in einzelne Stücke auf. Hier ist ein Vorschau des HTML-Codes angezeigt, nachdem JavaScript den Text nach Buchstaben aufgeteilt hat.

<ph type="x-smartling-placeholder">
</ph> Screenshot der Chrome-Entwicklertools mit geöffnetem Steuerfeld „Elemente“ und reduzierter Bewegung mit der Einstellung „Reduzieren“ und h1 wird ungeteilt angezeigt. <ph type="x-smartling-placeholder">
</ph> Der Nutzer ist mit Bewegungen einverstanden. in mehrere <span> aufgeteilter Text Elemente

Bewegungsbedingungen werden vorbereitet

Die bequem verfügbare @media (prefers-reduced-motion: reduce)-Medienabfrage wird aus CSS und JavaScript in diesem Projekt. Diese Medienabfrage ist die primäre Bedingung für zu entscheiden, ob der Text geteilt werden soll. Mit der CSS-Medienabfrage wird und Animationen, während mit der JavaScript-Medienabfrage die HTML-Bearbeitung zurück.

CSS-Bedingung vorbereiten

Ich habe PostCSS verwendet, um die Syntax von Media Queries Level 5 zu aktivieren, wo ich einen booleschen Wert für eine Medienabfrage in eine Variable umwandeln:

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

Vorbereiten der JS-Bedingung

In JavaScript bietet der Browser eine Möglichkeit, Medienabfragen zu überprüfen, desstrukturierens , um das boolesche Ergebnis aus der Medienabfrageprüfung zu extrahieren und umzubenennen:

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

Ich kann dann auf motionOK testen und das Dokument nur ändern, wenn der Nutzer dies nicht getan hat. Bewegungen zu reduzieren.

if (motionOK) {
  // document split manipulations
}

Ich kann denselben Wert prüfen, indem ich mit PostCSS die @nest-Syntax aus Verschachtelung von Entwurf 1. So kann ich die gesamte Logik für die Animation und die Stilanforderungen für die übergeordnete und untergeordnete Elemente an einem Ort:

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

Mit der benutzerdefinierten PostCSS-Eigenschaft und einem booleschen JavaScript-Code können wir nun bedingten Upgrades des Effekts. Damit kommen wir zum nächsten Abschnitt, JavaScript zum Transformieren von Zeichenfolgen in Elemente aufzuschlüsseln.

Text aufteilen

Textbuchstaben, Wörter, Zeilen usw. können nicht einzeln mit CSS oder JS animiert werden. Um diesen Effekt zu erzielen, brauchen wir Kästen. Wenn wir jeden Buchstaben animieren möchten, muss jeder Buchstabe ein Element sein. Wenn wir die einzelnen Wörter animieren möchten, Wort ein Element sein.

  1. JavaScript-Dienstfunktionen zum Aufteilen von Strings in Elemente erstellen
  2. Nutzung dieser Dienstprogramme orchestrieren

Dienstfunktion zum Aufteilen von Buchstaben

Am besten beginnen Sie mit einer Funktion, die eine Zeichenfolge nimmt und Buchstaben in einem Array.

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

Die verbreiten Syntax von ES6 macht diese Aufgabe zu einer schnellen Aufgabe.

Dienstfunktion zum Aufteilen von Wörtern

Ähnlich wie das Aufteilen von Buchstaben verwendet diese Funktion eine Zeichenfolge und gibt jedes Wort zurück in einem Array.

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

Die split() für JavaScript-Zeichenfolgen können wir angeben, nach welchen Zeichen segmentiert werden soll. Ich habe ein Leerzeichen übergeben, das auf eine Aufteilung zwischen Wörtern hinweist.

Dienstprogrammfunktion für Blöcke erstellen

Für den Effekt sind Felder für jeden Buchstaben erforderlich. In diesen Funktionen map() mit einer span()-Funktion aufgerufen wird. Hier ist die Funktion span().

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

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

  return node
}

Es ist wichtig zu beachten, dass eine benutzerdefinierte Eigenschaft namens --index mit Array-Position. Die Felder für die Buchstabenanimationen sind großartig, einen Index für die Verwendung in CSS zu haben, ist eine scheinbar kleine Ergänzung mit großer Wirkung. Besonders bemerkenswert bei diesem großen Einfluss umwerfend zu sein. Wir können --index verwenden, um Animationen für mehrstufige sehen.

Schlussfolgerung zu Dienstprogrammen

Das abgeschlossene Modul 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)

Als Nächstes lernen Sie, die Funktionen byLetter() und byWord() zu importieren und zu verwenden.

Geteilte Orchestrierung

Wenn die Dienstprogramme für die Aufteilung einsatzbereit sind, bedeutet das alles:

  1. Suchen, welche Elemente aufgeteilt werden sollen
  2. Teilen und Ersetzen des Textes durch HTML

Danach werden die Elemente und Felder von CSS animiert.

Elemente suchen

Ich habe mich entschieden, Attribute und Werte zu verwenden, um Informationen zum gewünschten und wie der Text aufgeteilt werden kann. Diese deklarativen Optionen gefiel mir in den HTML-Code einfügen. Das Attribut split-by wird aus JavaScript verwendet, um und Felder für Buchstaben oder Wörter zu erstellen. Das Attribut letter-animation oder word-animation wird aus CSS für das Zielelement verwendet und wenden Transformationen und Animationen an.

Hier ist ein HTML-Beispiel, das die beiden Attribute veranschaulicht:

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

Elemente aus JavaScript finden

Ich habe die CSS-Selektorsyntax für das Vorhandensein von Attributen verwendet, um die Liste der Elemente, deren Text aufgeteilt werden soll:

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

Elemente aus CSS finden

Außerdem habe ich die Attribut-Präsenzselektoren in CSS verwendet, um alle Buchstabenanimationen anzuzeigen. Basis-Stile verwenden. Später verwenden wir den Attributwert, um spezifischere um einen Effekt zu erzielen.

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

Text wird aufgeteilt.

Für jedes der in JavaScript gefundenen Aufteilungsziele wird der Text aufgeteilt. basierend auf dem Attributwert und ordnen Sie jeden String einem <span> zu. Wir können Ersetzen Sie dann den Text des Elements durch die Felder, die wir erstellt haben:

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

Fazit zur Orchestrierung

index.js abgeschlossen:

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

Der JavaScript-Code könnte in folgendem Englisch gelesen werden:

  1. Importieren Sie einige Hilfsdienstprogrammfunktionen.
  2. Prüfe, ob Bewegung für diesen Nutzer in Ordnung ist, andernfalls unternehmen Sie nichts.
  3. Für jedes Element, das aufgeteilt werden soll.
    1. Je nachdem, wie sie aufgeteilt werden sollen,
    2. Ersetzen Sie Text durch Elemente.

Animationen und Übergänge teilen

Durch die obige Bearbeitung des Dokumentaufteilungs-Dokuments wurde eine Vielzahl von Animationen und Effekte mit CSS oder JavaScript. Es gibt einige Links, am Ende dieses Artikels.

Zeigen Sie, was Sie alles drauf haben! Ich zeige Ihnen vier CSS-gesteuerte Animationen Übergänge. 🤓

Buchstaben teilen

Als Grundlage für die Aufteilungsbuchstaben-Effekte habe ich festgestellt, dass der folgende CSS-Code hilfreich sind. Ich platziere alle Übergänge und Animationen hinter der Motion Media-Abfrage Weisen Sie dann jedem neuen untergeordneten Buchstaben span eine Anzeigeeigenschaft und einen Stil dafür zu, mit Leerzeichen zu tun:

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

Der Stil der weißen Bereiche ist wichtig, damit die Spannen, die nur ein Leerzeichen sind, werden von der Layout-Engine nicht minimiert. Nun zu den zustandsorientierten, unterhaltsamen Inhalten.

Beispiel für aufgeteilte Buchstaben mit Wechsel

In diesem Beispiel werden CSS-Übergänge zum Effekt aufgeteilter Text verwendet. Mit Übergängen für die Animation der Suchmaschine erforderlich. Ich habe drei Stadien ausgewählt: nein. den Mauszeiger darüber bewegen, im Satz den Mauszeiger darüber bewegen, den Mauszeiger auf einen Buchstaben bewegen.

Wenn der Nutzer die Maus über den Satz bzw. Container bewegt, verkleinere ich alle so als würde der Nutzer sie weiter wegschieben. Wenn der Nutzer den Mauszeiger auf eine möchte ich sie vorbringen.

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

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

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

Beispiel für geteilte Buchstaben

In diesem Beispiel wird eine vordefinierte @keyframe-Animation verwendet, um jedes Element unbegrenzt zu animieren. und erstellt mithilfe des Inline-Index der benutzerdefinierten Eigenschaften Effekts.

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

Wörter aufteilen

Für mich hat Flexbox in diesen Beispielen gut als Containertyp funktioniert. Nutzung der Einheit ch als fehlerfreie Lückenlänge

word-animation {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1ch;
}
Flexbox-Entwicklertools zeigen die Lücke zwischen Wörtern an

Beispiel für aufgeteilte Wörter mit Übergang

In diesem Übergangsbeispiel verwende ich den Mouseover-Effekt. Da der Effekt das Symbol erst dann den Mauszeiger darauf bewegen, habe ich dafür gesorgt, dass Interaktionen und Stile wenn das Gerät über die Anzeige bewegt werden könnte.

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

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

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

Beispiel für die Animation geteilter Wörter

In diesem Animationsbeispiel verwende ich wieder die CSS-Datei @keyframes, um eine gestaffelte eine unendliche Animation auf einem normalen Textabschnitt.

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

Fazit

Jetzt, da du weißt, wie ich das gemacht habe, wie würdest du es tun?! 🙂

Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Erstellen Sie einen Codepen oder hosten Sie Ihre eigene Demo, twittern Sie mich mit dem Code und ich füge ihn zur Community-Remixe weiter unten.

Quelle

Weitere Demos und Inspiration

Community-Remixe