Scrollblur

#blur#design#fade#javascript#scrollblur#scrolleffekt

Ois "Designfreak" suach i natürlich imma nach geeigneter Inspiration, und wos bietet si do besser o, ois ab und zu auf de Webseitn von de großen Agenturen vorbeizschaun; so land i a ab und zu auf da Seitn von Syzygy. Beim Scrollen is ma natürlich aufgfoin, dass des Header-Bild auf da Startseitn langsam verschwommen wird, je weiter ma auf da Seitn noch unten scrollt. Des wü i a! Ziemlich nice! Des Ganze muasst natürlich nochbaut wern, und woar für mi besonders interessant, weil i davon ausgangen bin, dass es koa CSS-Property für "Blur-Image" gibt (und hob mi do wohl getäuscht). Statt's vorher zu StackOverflown, hob i mi für a ondere Methode entschieden und stö do kurz beide Möglichkeiten vor. Vielleicht findet ja wer den Effekt genauso eindrucksvoll wia i und kann si an meim Code orientiern.

Möglichkeit 1: Fade

Da erste Ansatz woar, einfach zwoa Bilder übereinander zu lagern und oans von beiden beim Scrollen proportional zur Scrollposition auszublenden. Dazu brauchn mia des Bild in zwoa Versionen: Amoi mit Blur-Effekt, und amoi ohne. Dazu hob i des Original-Bild in Photoshop mit'm Gauß'schen Weichzeichner bearbeitet und 8px Blur gsetzt (mit den Werten muass je noch Bild a bissl experimentiert wern).

Weil i des Ganze a ois Heroimage (volle Breite, Baby) aufbaun wollt (wia bei Syzygy), hob i a Div mit 100 % Width und position:relative; definiert und ois background-image des verschwommene Bild gsetzt. In des Div kummt a weiteres Div mit 100 % Width und 100 % Height, position:absolute und ois background-image des "unverschwommene Bild", sodass des unblurred Bild des blurred überlagert, bzw. des obere Div mit dem unverschwommenen Bild des Div mit dem verschwommenen verdeckt. Sobois jetzt gscrollt wird, blenden mia des "innere" Div (= unverschwommen) langsam aus, sodass des "äußere" Div (= verschwommen) eingeblendet wird. So weit, so einfach. Nur die Berechnung vom Opacity-Wert kunnt a poar Kopfschmerzen bereitn.

Noch a bissl Experimentiern bin i zu folgender Lösung kemman: Mia wolln, sobois des Bild zu 100 % aus dem Viewport gscrollt wurde, a Opacity von 0 für des innere Div, sodass des äußere Div mit dem verschwommenen Bild sichtbar wird. Mia brauchn also erstmoi 1 % von da Höhe vom Bild, um uns zu orientiern, wos mia durch

100 / $('#hero-image-inner').height()

berechnen kinnan. Diesen Wert multiplizieren mia mit da Scrollposition in px (= entspricht da Anzoi an Pixel, de mia scho runtergscrollt hom). Diesen Wert ziagn mia von 1 ab, weil mia an negativen Opacity-Wert hom wolln (Opacity 1 bedeutet sichtbar, Opacity 0 unsichtbar). I persönlich teil den Wert vorher no durch 50, weil i bereits bei 50 % an Blur von 100 % hom wü. Sonst wär des Bild erst "unverschwommen" (= des innere Div hot a Opacity von 0), wenn da Nutzer so weit gscrollt hot, dass er des Bild nimma sehn kann. Wär natürlich bled. Aber Code sogt ja bekanntlich mehr ois 1000 Wörter:

Javascript

$(document).on('scroll', function(){
  $("#hero-image-inner").css("opacity", 1 - (100 / $('#hero-image-inner').height() * $(document).scrollTop()) / 50);
});

HTML

<div class="hero-image-outer">
  <div id="hero-image-inner"></div>
</div>

Möglichkeit 2: CSS-Filter

(Do wär eigentlich a Video eingbettet gwesn, des die zwoate Variante zeigt.)

De zwoate Möglichkeit, de ma söba neich woar, setzt den CSS-Filter "blur" abhängig davon, wia weit scho gscrollt wurde. Wer damit no ned gorbeit hot, kann si a Einführung zu CSS-Filtern bei W3Schools holn. Mia brauchn bei dera Variante koa Photoshop bzw. koa Bildbearbeitungsprogramm, weil da Effekt direkt im Browser generiert wird. De jQuery-Funktion wird jetzt imma dann ausgelöst, sobois gscrollt wird, und berechnet dabei den "Blurfilter" neu. Dabei wird die Variable percent onders berechnet ois oben, weil da Blur-Filter an Wert von 0-100 und ned von 0-1 erwartet. percent berechnet si also aus da Gesamthöhe vom Bild in Pixel multipliziert mit da aktuellen Scrollposition. Scrollen mia zum Beispiel 2px noch unten, wär da Blur-Wert bei ana Bildgröße von 200x200 genau 400. Des wär a bissl vül, weil mia dann scho noch oam Pixel des gsamte Bild verschwommen hättn. Drum brauchn mia nur an Bruchteil vom Wert, den mia dadurch berechnen, dass mia an "Teilwert" nutzn (in dem Foi 20), den mia durch den berechneten Wert teiln. Wennts ihr a schnellere oda langsamere Animation wollts, spielts einfach a bissl mit dem Teiler 20 rum - höherer Wert führt zu ana schnelleren Animation, niedrigerer Wert entsprechend zu ana langsameren.

HTML

<img src="images/clearimage.png" id="heroimage">

Javascript

$(document).on('scroll', function(){
  var percent = (20 / $('#heroimage').height() * $(document).scrollTop());
  $("#heroimage").css("filter", "blur(" + percent + "px)");
  $("#heroimage").css("filter", "filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='(" + percent + "')");
});

Do gilt - ganz wichtig: Die Berechnung vom Opacity-/Blur-Wert hob i durch Trial&Error rausgfunden. Es kann sei, dass des ned die performanteste oda beste Lösung is. Wenn wer a "saubere" Lösung anbieten kann, darf er oda sie ma des gern in den Kommentaren mitteiln.

TL;DR

Möglichkeit 1: Zwoa Bilder überlagern (verschwommen & unverschwommen), oans ausblenden
Möglichkeit 2: CSS-blur-Filter
Berechnung da Prozentangabe durch Bildhöhe * Scrollposition