Desenfoque de fondo CSS en desplazamiento

He arreglado la imagen de fondo y en el desplazamiento quiero que la imagen salga borrosa. Sé cómo hacer desenfoque en css pero hacerlo en una posición de desplazamiento específica.

Aquí hay un ejemplo: https://medium.com/good-music/f160ba9e6c52

Cualquier pensamiento, ejemplos, consejos de fragmentos serán útiles.

Gracias

Este codepen hace exactamente lo que quieres. Teniendo en cuenta la compatibilidad con el navegador, utiliza 2 imágenes aunque en lugar de desenfoque:

http://codepen.io/sota0805/pen/pqLcv

En el ejemplo de su sitio web ( https://medium.com/good-music/f160ba9e6c52 ) no hay un efecto de “desenfoque” de css .

Puede encontrar una imagen normal: https://d262ilb51hltx0.cloudfront.net/max/1440/1 * THFG10B56f4TQOebO1Zd_w.jpeg

Y una imagen borrosa: https://d262ilb51hltx0.cloudfront.net/max/1440/gradv/29/81/40/darken/45/blur/20/1 * THFG10B56f4TQOebO1Zd_w.jpeg

Después de superponer esas dos imágenes, tienes que cambiar la opacidad de la primera, ¡listo!

Solo he mencionado cómo puede obtener la posición con el desplazamiento.

$('#divscroll').bind('mousewheel', function (e) { var toTop = $(window).scrollTop(); //from this you can get the distance from the top //then you can blur the image as you want with relevent to the position of ur image }); 

Para IE, el enlace anterior de Opera no funcionará, por lo que necesita

  $('#divscroll').bind('DOMMouseScroll', function (e) { var toTop = $(window).scrollTop(); //Handle your logic }); 

Espero que esto pueda ayudar. Aclamaciones.!

Puede difuminar el elemento en relación a la distancia que ha desplazado.

 $(window).scroll(function(e) { var distanceScrolled = $(this).scrollTop(); $('.element').css('-webkit-filter', 'blur('+distanceScrolled/60+'px)'); }); 

Aquí estoy usando scrollTop() para obtener la cantidad de píxeles que la ventana ha desplazado, y luego configuro el desenfoque del elemento en ese número dividido por 60, que es solo un número arbitrario que elegí para obtener el desenfoque que quería.

Si desea agregar el desenfoque en un punto determinado, puede usar un elemento en el DOM y la posición de verificación en relación con la ventana.

 $(window).scroll(function(e) { var elOffset = $('.element').scrollTop() - $(window).scrollTop(); if(elOffset < 450) { $(this).addClass('blur'); } }); 

Si .element está a menos de 450 px de la parte superior de la ventana, se le agregará la clase blur . Tu clase de desenfoque se vería así:

 .blur { -webkit-filter: blur(4px); } 

Probablemente querrá usar una transición con él. No olvide los prefijos del vendedor.