Ein Slide-in ist ein Element, das beim Scrollen oder nach einer Wartezeit von der Seite her hereinfährt. Verbreitet sind Hinweise auf den Newsletter, Chat-Einladungen und Angebote, die unten rechts erscheinen, ohne die Seite zu blockieren.
- Slide-in
Element, das beim Scrollen oder nach einer Wartezeit von der Seite her hereinfährt.
Beispiel: „Nach der Hälfte des Beitrags fährt unten rechts ein Slide-in mit dem Newsletter herein.“Abgrenzung zum Modal: Das Modal legt sich über die Seite und verlangt eine Entscheidung. Das Slide-in bleibt am Rand, und die Seite ist weiter bedienbar.
Abgrenzung zum Toast: Der Toast meldet das Ergebnis einer Handlung und verschwindet von selbst. Das Slide-in wirbt und bleibt stehen, bis es geschlossen wird.
Wofür es taugt
Für ein Angebot, das zum gerade gelesenen Inhalt passt und keine Unterbrechung rechtfertigt. Der übliche Auslöser ist der Scrollfortschritt: Wer die Hälfte eines Beitrags gelesen hat, zeigt Interesse am Thema, und genau dort passt der Hinweis auf mehr davon.
Eine Zeitsteuerung allein ist der schwächere Auslöser, weil sie nichts über das Interesse sagt. Noch schwächer ist das Erscheinen gleich beim Aufruf, weil dann niemand weiß, worauf sich der Hinweis bezieht.
Wie es umgesetzt wird
Das Element steht von Anfang an im Markup und wird außerhalb des sichtbaren Bereichs geparkt. Eingeblendet wird es über eine Verschiebung, nicht über eine Änderung der Position, weil der Browser Verschiebungen ohne neues Layout darstellen kann.
.slide-in {
position: fixed;
right: 24px;
bottom: 24px;
transform: translateX(calc(100% + 24px));
transition: transform 300ms ease-out;
}
.slide-in.ist-sichtbar { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.slide-in { transition: none; }
}Wann es nur stört
Wenn es den Text überdeckt, den es begleiten soll. Auf dem Smartphone ist der Platz unten rechts bereits belegt, oft gleich mehrfach, und ein weiteres schwebendes Element verdeckt zuverlässig die letzte Zeile.
Dazu gehört ein Schließen, das anhält: Wer das Slide-in wegklickt, darf es auf derselben Seite nicht wiedersehen. Aus unserer Arbeit an über 2.500 Website-Projekten ist genau das der Punkt, an dem die meisten Umsetzungen scheitern, weil der Zustand nirgends gemerkt wird.