Aplicar desenfoque a las imagenes con CSS y Javascript

Mediante el CSS, en navegadores web modernos, podemos usar una serie de efectos creativos sobre una página web, en este caso veremos como aplicar el efecto Blur o Desenfoque sobre una imagen determinada de manera dinámica usando Javascript.

El desenfoque o efecto blur sólo esta disponible en navegadores modernos con soporte de HTML5.

En este artículo, aplicaremos un [efecto Blur] o de Desenfoque sobre una imagen de fondo en una página web, que es una de las formas utilizadas para darle interés gráfico a la página mediante CSS.
Sin embargo, acá iremos un poco más allá y haremos que el efecto sea interactivo, para tal efecto usaremos un código Javascript y así dar la interactividad sobre la página web.

Elementos básicos para el Desenfoque Interactivo

Imaginemos que contamos con una página web que tienen una imagen de fondo, y lo que deseamos hacer es, que en la medida que hagamos un scroll vertical sobre la página web su imagen de fondo se desenfoque.
Para conseguir lo anterior, nos apoyaremos en la librería jQuery, que junto a un código Javascript nos permitirá determinar cuando activar el efecto y en que magnitud.
Determinar la cantidad de scroll vertical (en pixeles) que hemos realizados sobre una página web, puede ser capturada con el siguiente código Javascript (jQuery):

var px_scrollTop = $(this).scrollTop();

Además, el código CSS estático que aplica el estilo Blur o desenfoque a una página web es:

-webkit-filter: blur(5px);
filter: blur(5px);

Y si además, consideramos que necesitamos reposicionar la imágen de fondo pues en es lo suficientemente grande, entonces el código CSS estático para hacerlo será:

background-position: center -50px;

En consecuencia, ya tenemos casi todos los ingredienes principales para programas ese efecto de desenfoque o blur, dinámicamente. Sólo debemos desde el Javascript capturar los movimientos del scroll del usuario en la página y redefinir el CSS. jQuery nos permite disparar una función cuando suceda el evento Scroll mediante:

$(document).scroll(mi_funcion() {...});

Y además determinar la altura inicial de la ventana del navegador con:

var height = $(windows).height();

Código Javascript para un Desenfoque Dinámico

Finalmente, el código Javascript usando jQuery para lograr el efecto de desenfoque sobre una imagen de fondo a medida que hagamos scroll sobre una página web, se reduce a aplicar los elementos anteriormente expuestos usando la librería jQuery, simplemente es:

$(document).on('ready', iniciar);
//
// 
function iniciar() {
    var height = $(window).height();
    //
    // determino los datos en el evento scroll
    $(document).scroll(function() {
        //
        // desplazamiento vertical:
        var scrollTop = $(this).scrollTop();
        var pixels = scrollTop/70;
        //
        // evitando calcular el efecto cuando la imagen no sea visible:
        if (scrollTop < height) {
            $("section#contenedor_general").css({
                "-webkit-filter":"blur(" + pixels + "px)",
                "background-position":"center -" + pixels * 10 + "px"
                });
        }
        });
}

Conclusión

Vemos una forma interesante aplicar efectos CSS desde el propio código Javascript empleando jQuery. Hay muchos otros filtros de imágenes interés disponibles en el CSS moderno, que podemos manejarlos dinámicamente desde el Javascript sin mayores complicaciones y escribiendo un código muy escueto.

Se dice que, con el actual nivel de recursos gráficos que propone el HTML5, es posible ya hacer el diseño web sin emplear Photoshop o programas de diseño gráfico similares.

Espero que este artículos les sea de utilidad, cuando busquen darle algunos tintes de dinamismo a sus diseños Web sin mayores complicaciones.

Enlaces relacionados

La librería jQuery: https://jquery.com/.
Estructura del DOM HTML: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model.
Referencia de Javascipt: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference.  
Estilos CSS: https://www.w3.org/Style/CSS/Overview.en.html.
Características del HTML5 soportadas en los distintos navegadores web: https://caniuse.com/
Algunos efectos interesantes de CSS: https://www.w3schools.com/cssref/css3_pr_filter.asp