Scrollblur

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

"design freak" inspiration reH search; big agencies websites visit - Syzygy website Daq land je. scroll: header image start page Daq slowly blurred scroll down law'. jIH neH! pretty nice! rebuild poQ, 'ej CSS property "blur image" ghajbe' assume (wrong, filter exist). StackOverflow pagh, different method choose - cha' possibilities present. effect impressive vaj code orient.

Possibility 1: Fade

first approach: cha' images stack, wa' scroll position proportional fade out. image cha' versions poQ: blur effect rap 'ej pagh. original image Photoshop Gaussian blur 8px (values experiment).

hero image (full width, baby) rap: div 100% width, position:relative; background-image blurred image. div Daq another div 100% width 100% height, position:absolute, background-image "unblurred image" - unblurred blurred overlay. scroll vaj "inner" div (= unblurred) slowly fade out, "outer" div (= blurred) fade in. simple. opacity value calculation headache.

experiment qaSDI': image 100% viewport vo' scroll vaj inner div opacity 0, outer div blurred image visible. image height 1% poQ:

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

compute. value scroll position px (= pixels scrolled already) multiply. 1 vo' subtract (opacity 1 visible, 0 invisible). jIH value 50 divide (50% Daq blur 100% neH). pagh vaj image "unblurred" user image legh laHbe' qaSDI' neH. stupid. code 1000 words law' jatlh:

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>

Possibility 2: CSS filter

(video second variant show embed neH.)

second possibility (jIH new) CSS filter "blur" scroll distance depend set. CSS filters introduction W3Schools Daq. Photoshop image editing program poQ pagh - browser Daq directly effect generate. jQuery function scroll vaj trigger, "blur filter" recalculate. variable percent above law' pIm calculate (blur filter 0-100 expect, 0-1 pagh). percent image total height pixels × current scroll position. 2px scroll down: 200x200 image blur value 400. law' (wa' pixel qaSDI' whole image blurred). fraction neH poQ: "partial value" (20) divide. animation faster slower neH vaj divider 20 play - higher value faster, lower slower.

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 + "')");
});

qatlh: opacity / blur value calculation trial&error find. performant best solution pagh laH. "cleaner" solution vaj comments Daq jatlh.

TL;DR

Possibility 1: cha' images overlay (blurred & unblurred), wa' fade out
Possibility 2: CSS blur filter
percentage calculation: image height * scroll position