Jetzt testen

Farbe · Farbverläufe

Mit parallax-greyscale-(–XX) veränderst du die Farbe beim Scrollen – von grau zu bunt oder umgekehrt für echte Bilddynamik

Starte Farbe · Farbverläufe

Farbe – Scroll-basierte Farbverläufe und Sättigungseffekte

Mit parallax-greyscale-(--XX) steuerst du die Farbintensität deiner Parallax-Elemente.
Der Effekt wandelt die Sättigung von grau nach farbig und wieder zurück – perfekt, um Aufmerksamkeit auf bestimmte Bereiche zu lenken oder starke Kontraste beim Scrollen zu erzeugen.
Er funktioniert für parallax-image und parallax-container gleichermaßen.

Richtung und Wirkung

parallax-greyscale-10
grau → farbig → grau
parallax-greyscale--10
farbig → grau → farbig

Der Wert steuert die Intensität (0 – 100 %). Hohe Werte liefern starke Kontraste, kleine Werte dezente Verläufe.

<div class="parallax-image parallax-opacity-10">
  
</div>

Wirkung von parallax-greyscale-

In diesem Besipiel verwenden wir:

  • parallax-
  • parallax-x
  • parallax-zoom-
  • parallax-grescale-

Deinen Ideen sind keine Grenzen gesetzt

P A R A L L A X S M R T

Gestaltung und Einsatz

Hero-Bilder: beim Scrollen werden Farben aktiv, erzeugt eine Eintritts-Dynamik.

Fotogalerien: starten in Graustufen, beleben sich beim Betreten des Viewports.

Text auf Bildern: graue Hintergründe lenken Blick auf den Text, anschließend Farbe für Abschluss-Effekt.

Beispiel-Ideen