Ein grundlegender Überblick über die Erstellung von Animationen zum Aufteilen von Buchstaben und Wörtern.
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">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:
- Bedingungen mit reduzierter Bewegung vorbereiten für CSS und JS.
- Dienstprogramme zum Aufteilen von Text vorbereiten in JavaScript
- Bedingungen und Dienstprogramme auf der Seite Orchestrieren laden.
- CSS-Übergänge und -Animationen schreiben nach Buchstaben und Wörtern.
Hier ist eine Vorschau der bedingten Ergebnisse:
<ph type="x-smartling-placeholder">![Screenshot der Chrome-Entwicklertools mit geöffnetem Steuerfeld „Elemente“ und reduzierter Bewegung mit der Einstellung „Reduzieren“ und h1 wird ungeteilt angezeigt.](https://web.dev/static/articles/building/split-text-animations/image/screenshot-the-chrome-de-65fd5b490f405.png?authuser=6&hl=de)
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">![Screenshot der Chrome-Entwicklertools mit geöffnetem Steuerfeld „Elemente“ und reduzierter Bewegung mit der Einstellung „Reduzieren“ und h1 wird ungeteilt angezeigt.](https://web.dev/static/articles/building/split-text-animations/image/screenshot-the-chrome-de-fd950f1664ff6.png?authuser=6&hl=de)
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.
- JavaScript-Dienstfunktionen zum Aufteilen von Strings in Elemente erstellen
- 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:
- Suchen, welche Elemente aufgeteilt werden sollen
- 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:
- Importieren Sie einige Hilfsdienstprogrammfunktionen.
- Prüfe, ob Bewegung für diesen Nutzer in Ordnung ist, andernfalls unternehmen Sie nichts.
- Für jedes Element, das aufgeteilt werden soll.
- Je nachdem, wie sie aufgeteilt werden sollen,
- 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;
}
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
- Webkomponente „
<text-hover>
“ von gnehcwu in CodeSandbox