BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Desenfocar imágenes con jQuery Background Blur plugin

04/ENE/2017 2.527 visitas Ver comentarios
Desenfocar imágenes con jQuery Background Blur plugin

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Desenfocar imágenes (sobre todo las usadas como fondo) suele quedar muy bien... El problema de este efecto es que, si no queremos usar los filtros de CSS por problemas de compatibilidad con los navegadores, tenemos que depender de hacer la imagen desenfocada (con blur) y la normal y esto nos cuesta demasiado trabajo.

Pues bien, Background Blur viene a darnos una solución muy elegante y muy liviana (de tan solo 4 kb) que se encargará mediante el soporte SVG de nuestros browsers de aplicar el blur a las imágenes de una manera muy elegante y fácil (tan solo una línea de código bastaría). Efecto al cual puede aplicarse una animación si queremos realizar transiciones entre imágenes.

Navegadores soportados:

  • Chrome
  • Firefox
  • Safari and Safari Mobile (iOS)
  • IE6, IE7, IE8 - soporta el efecto blur pero sin animación
  • IE9, IE10, IE11
  • Android

Al detalle:

Este plugin utiliza SVG para desenfocar la imagen si SVG es soportado por el navegador (todos excepto, lógicamente, IE), de lo contrario, el plugin creará un tag IMG y aplicará algunas reglas específicas para IE en CSS.

Soporte para Velocity.js

Por si no conoces esta librería, Velocity.js se encarga de mejorar el rendimiento de las animaciones especialmente en móviles ya que no requiere jQuery y su rendimiento es superior a jQuery Animate. Pues bien, si estás usando esta librería en tu proyecto, el plugin la detectará y la usará en lugar de Animate, de lo contrario, degradará a jQuery.

La Demo:

He preparado una demo porque en los issues de su página de Github le comentan que la url de la imagen no puede tomarse dinámicamente sino que debe ser indicada en el javascript que declara la llamada al plugin. Esto me parece, desde luego, un problema enorme, así que he estado trasteando un poco para hacerlo funcionar. Echa un ojo a la demo en el botón superior y mira el resultado :)

En esta demo, he ido un poco más allá y, además de indicar dinámicamente la imagen a desenfocar, he creado una capa dinámica que mostrará la imagen real al pasar el ratón por encima de la capa desenfocada para crear un buen efecto de mostrar/esconder imágenes desenfocando como efecto.

Si te gusta el plugin (tanto como a mi), puedes descargarlo desde este enlace y cualquier aporte que quieras hacer a esta entrada, como siempre, será más que bienvenido.

Código 1 - HTML
<script src="jquery.min.js"></script>
<script src="background-blur.min.js"></script>
Código 2 - HTML
<div id='some-element'></div>
Código 3 - JAVASCRIPT
$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 20 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018