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 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-10

transparent → sichtbar → transparent

parallax-opacity--10

sichtbar → 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.