Fokus – Schärfe & Tiefe

Mit parallax-blur-(–XX) setzt du gezielt Unschärfe und Fokus – für realistische Tiefenwirkung und weiche Scroll-Übergänge

Fokus – Schärfe und Tiefe im Bewegungsfluss

Der Effekt parallax-blur-(--XX) kontrolliert die Bildschärfe deiner Parallax-Elemente.
Beim Scrollen ändert SmartParallax den Grad der Unschärfe und simuliert so einen natürlichen Fokuswechsel – ähnlich wie bei einer Kamera.
Damit lassen sich Vorder- und Hintergrundebenen optisch trennen und gezielt ins Blickfeld rücken.

Richtung und Wirkung

parallax-blur-10

unscharf → scharf → unscharf

parallax–blur–10

scharf → unscharf → scharf

Der Wert hinter blur- steuert die Intensität in Pixeln (maximal 12 px).

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

Wirkung von parallax-blur-

In diesem Besipiel verwenden wir:

parallax-
parallax-x
parallax-zoom-
parallax-blur-

Deinen Ideen sind keine Grenzen gesetzt

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

Gestaltung und Einsatz

Hintergrundbilder: Sanft ausblenden beim Scrollen, um Inhalt zu fokussieren.
Textbereiche: Schärfen sich beim Erreichen der Mitte – starker Lesefokus.
Übergänge: Unscharf ein- und ausblenden für filmische Wechsel.

Kombiniert mit parallax-zoom oder parallax-opacity entstehen hochwertige Kamera-ähnliche Effekte.