Start
Für die Animation von Slides, die sich seitlich ins Fenster schieben, wird normalerweise die Basisangabe für margin-left auf einen
negativen Wert gesetzt und im aktiven Zustand dann dynamisch zu Null geändert. Das Slide-Element schiebt sich
dadurch von einer Position außerhalb des sichtbaren Fensters in das Fenster hinein.
Dieses Vorgehen funktioniert jedoch nicht bei negativen Werten für margin-right, oder alternativ für eine absolute Positionierung mit left: 100%.
Ursache: Anders als bei einem Element links außerhalb des sichtbaren Fensters, erhält ein Slide-Element rechts außerhalb den Fokus, sobald es aktiviert wird. Dadurch verschiebt sich dann das gesamte Fenster entsprechend nach links - die Gestaltung ist zerstört.
Dieses Verhalten ist auch durchaus logisch, den wir lesen Text von links nach rechts. Es kann also keinen sichtbaren Inhalt links vom linken Rand geben, der rechte Rand ist hingegen keine absolute Grenze.
Lösung: Das Slide-Element wird nicht nur mit left: 100% außerhalb des sichtbaren Fensters positioniert, sondern seine Breite zusätzlich mit width: 0 auf Null gesetzt! Erhält es jetzt den Fokus, kann das Fenster nicht nach links verschoben werden.
Slide #1
Genaugenommen ist diese Lösung natürlich kein Slide mehr, sondern ein Stretch. Aber ganz ehrlich, wem ist es aufgefallen?
Zusätzlich wird in diesem Beispiel noch die Hintergrundfarbe des Slide-Elements von Schwarz zu Weiß verändert. Das sorgt für einen etwas eleganteren Übergang.
Slide #2
Genaugenommen ist diese Lösung natürlich kein Slide mehr, sondern ein Stretch. Aber ganz ehrlich, wem ist es aufgefallen?
Zusätzlich wird in diesem Beispiel noch die Hintergrundfarbe des Slide-Elements von Schwarz zu Weiß verändert. Das sorgt für einen etwas eleganteren Übergang.
Slide #3
Genaugenommen ist diese Lösung natürlich kein Slide mehr, sondern ein Stretch. Aber ganz ehrlich, wem ist es aufgefallen?
Zusätzlich wird in diesem Beispiel noch die Hintergrundfarbe des Slide-Elements von Schwarz zu Weiß verändert. Das sorgt für einen etwas eleganteren Übergang.