HOWTO · CSS
Ein Element mit CSS von links hereingleiten lassen
Lernen Sie, wie Sie mit CSS einen Slide-in-Effekt von links mit transform und transition erstellen, ihn beim Laden der Seite auslösen und sein Timing oder seine Richtung anpassen.
Auf dieser Seite
Ein Slide-in von links bewegt ein Element aus einer Position links neben seinem Zielort ins Sichtfeld. Mit CSS lässt sich dieser Effekt erzeugen, indem transform und opacity zwischen zwei Zuständen geändert werden. Dieses Beispiel verwendet eine transition; eine CSS-animation mit Keyframes ist eine weitere Möglichkeit, wenn ein Effekt mehrere Schritte umfasst oder wiederholt werden soll.
So funktioniert ein Slide-in von links
Eine transition animiert eine Eigenschaft, während sich ihr Wert ändert. Das Element beginnt nach links verschoben und transparent. Anschließend bewegt es sich an seine normale Position und wird sichtbar. translateX() steuert die horizontale Bewegung. Dauer und Timing-Funktion der Transition bestimmen, wie sich die Änderung anfühlt. Die Eigenschaft transform verändert die visuelle Position, ohne den Platz des Elements im Dokumentfluss zu ändern.
HTML-Struktur einrichten
Die Seite benötigt ein Element mit einer Klasse, auf die das CSS zugreifen kann. Im vollständigen Beispiel unten hat das Element anfangs nur die Klasse slide-in. Nach dem Laden der Seite fügt JavaScript is-visible hinzu, damit der Browser vom Anfangszustand überblenden kann. Sind von Anfang an beide Klassen im HTML vorhanden, ist das Element bereits beim ersten Rendern sichtbar; eine Animation aus dem verborgenen Zustand findet dabei nicht statt. Damit der Slide-in-Übergang sichtbar wird, muss die Klasse für den sichtbaren Zustand erst hinzugefügt werden, nachdem der Anfangszustand gerendert wurde – wie im Beispiel.
Slide-in von links mit CSS erstellen
Legen Sie den Anfangszustand mit transform: translateX(-100vw) und opacity: 0 fest. Die Verschiebung um eine Viewport-Breite positioniert das Element links außerhalb des sichtbaren Bereichs; opacity macht es dort transparent. Für den sichtbaren Zustand verwenden Sie transform: translateX(0) und opacity: 1. Eine transition für diese Eigenschaften animiert die Änderung innerhalb einer halben Sekunde mit einer Ease-Timing-Funktion.
Außerdem blendet die Seite den horizontalen Überlauf aus, damit die Startposition außerhalb des sichtbaren Bereichs keine horizontale Bildlaufleiste erzeugt. Verringern Sie die Verschiebungsdistanz, wenn das Element eine kürzere Strecke zurücklegen soll.
Effekt auslösen und anpassen
Kopieren Sie dieses JavaScript in eine Datei wie generate-page.js und führen Sie sie mit Node.js aus. Das Skript gibt den vollständigen Quelltext einer HTML-Seite aus. Speichern Sie diesen als slide-in.html und öffnen Sie die Datei in einem Browser, um den Effekt zu sehen. Das unveränderte Beispiel zeigt eine englische Beschriftung. Hier wird der Effekt beim Laden der Seite ausgelöst; eine Website kann die Klasse für den sichtbaren Zustand stattdessen auch als Reaktion auf einen Klick auf eine Schaltfläche oder ein anderes Ereignis hinzufügen.
const html = `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slide in from the left</title>
<style>
body { overflow-x: hidden; font: 1rem sans-serif; }
.slide-in {
display: inline-block;
padding: 1rem 1.5rem;
background: #e7f1ff;
transform: translateX(-100vw);
opacity: 0;
transition: transform 500ms ease, opacity 500ms ease;
}
.slide-in.is-visible {
transform: translateX(0);
opacity: 1;
}
</style>
</head>
<body>
<div class="slide-in">Hello, I slide in from the left!</div>
<script>
window.addEventListener("load", () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.querySelector(".slide-in").classList.add("is-visible");
});
});
});
</script>
</body>
</html>`;
console.log(html);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slide in from the left</title>
<style>
body { overflow-x: hidden; font: 1rem sans-serif; }
.slide-in {
display: inline-block;
padding: 1rem 1.5rem;
background: #e7f1ff;
transform: translateX(-100vw);
opacity: 0;
transition: transform 500ms ease, opacity 500ms ease;
}
.slide-in.is-visible {
transform: translateX(0);
opacity: 1;
}
</style>
</head>
<body>
<div class="slide-in">Hello, I slide in from the left!</div>
<script>
window.addEventListener("load", () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.querySelector(".slide-in").classList.add("is-visible");
});
});
});
</script>
</body>
</html>
Ändern Sie 500ms, um die Geschwindigkeit anzupassen. Dauer und Timing-Funktion lassen sich unabhängig voneinander einstellen. Für eine Bewegung von oben verwenden Sie im Anfangszustand translateY() mit einem negativen vertikalen Abstand und im sichtbaren Zustand translateY(0). JavaScript ist nicht erforderlich, wenn die Klasse für den sichtbaren Zustand bereits beim Rendern der Seite vorhanden ist. Soll der Effekt erst nach einem Ereignis oder einer späteren Zustandsänderung beginnen, können Sie JavaScript verwenden.
Häufig gestellte Fragen
Funktioniert das auch auf Mobilgeräten?
Das Beispiel verwendet CSS-Transformationen und Transitions. Prüfen Sie im Rahmen Ihrer üblichen Kompatibilitätsprüfung, ob die Browser und Geräte unterstützt werden, für die Ihre Website vorgesehen ist.
Wie ändere ich die Dauer?
Ändern Sie die Dauer 500ms in der transition-Deklaration. Sie können für transform und opacity unterschiedliche Dauern festlegen, wenn die Änderungen zu verschiedenen Zeitpunkten abgeschlossen sein sollen.
Kann das Element aus einer anderen Richtung hereingleiten?
Ja. Verwenden Sie translateY() für eine vertikale Bewegung oder ändern Sie Vorzeichen und Abstand von translateX(), damit das Element von der gegenüberliegenden horizontalen Seite hereinkommt.
Ist JavaScript erforderlich?
Nein. CSS übernimmt den Übergang zwischen den beiden Zuständen. JavaScript ist nur eine Möglichkeit, die Klasse zum passenden Zeitpunkt zu ändern. Sie können stattdessen auch eine bereits im HTML vorhandene Klasse oder eine andere durch CSS gesteuerte Zustandsänderung verwenden.