Sichtbarkeit · Transparenz
Mit parallax-opacity-(–XX) steuerst du Transparenz und Übergänge – von sanften Einblendungen bis zu fließenden Ausfades
Sichtbarkeit – Elemente im Scroll ein- und ausblenden
Der Effekt
Dadurch kann ein Element beim Erscheinen sanft eingeblendet und beim Verlassen wieder ausgeblendet werden.
Das sorgt für weiche Übergänge und einen professionellen, filmischen Flow zwischen Sektionen.
parallax-opacity-(--XX) steuert die Transparenz eines Elements abhängig von der Scrollposition.Dadurch kann ein Element beim Erscheinen sanft eingeblendet und beim Verlassen wieder ausgeblendet werden.
Das sorgt für weiche Übergänge und einen professionellen, filmischen Flow zwischen Sektionen.
Richtung und Wirkung
parallax-opacity-10transparent → sichtbar → transparent
parallax-opacity--10sichtbar → transparent → sichtbar
Je höher der Wert, desto stärker die Transparenz-Veränderung.
<div class="parallax-image parallax-opacity-10">
</div>
Wirkung von parallax-blur-
In diesem Besipiel verwenden wir:
- parallax-
- parallax-x
- parallax-zoom-
- parallax-opacity-
Deinen Ideen sind keine Grenzen gesetzt
P
A
R
A
L
L
A
X
S
M
R
T
Gestaltung und Einsatz
- Intro-Texte: sanftes Erscheinen beim Scrollen nach unten.
- Call-to-Action-Boxen: kurzes Aufblitzen bei Mitte des Viewports.
- Übergänge zwischen Abschnitten: Text verblendet aus, während der nächste Inhalt überlappt.
In Kombination mit parallax-blur oder parallax-zoom lassen sich mehrschichtige Fokuswechsel bauen.
Beispiel-Ideen
Sichtbar werden
Verschwinden und zurückkehren