En este blog hemos hablado sobre muchas galerías de imágenes desarrolladas con jQuery. Pero como también hemos visto, siempre existe la posibilidad de hacer algo nuevo en materia de efectos y prueba de ello es Gallery Focus.
Gallery Focus es un plugin jQuery que podemos usar en nuestros desarrollos para desenfocar elementos por proximidad. Con éste podemos definir el área a desenfocar, el grado del desenfoque y algunas otras opciones más.
Implementar Gallery Focus
El desarrollo más básico que podemos hacer, es el ejemplo que muestra el siguiente código
$('#gallery img').galleryFocus();
// Algunas opciones que podemos usar es el radio, que por defeco es 400 y el grado (el nivel de transparencia) del desvanecimiento (fade):
$('#gallery img').galleryFocus({
'radius': 800,
'fadeTo': 0.0,
// Además tenemos que especificar el elemento del DOM de la página al que le aplicaremos el efecto:
'source': '#source-div',
// Otra opción disponible es la que nos permite invertir el área de desenfoque.
'invert': true,
// Activamos el efecto poniendo la propiedad overlay a true:
'overlay': true
});
Corolario
Gallery Focus ofrece un efecto con una completa gama de opciones que lo hace muy versátil, permitiéndonos personalizarlo según nuestras necesidades o la estética final que queramos mostrar.
En la página de este desarrollo encontramos un demo online y funcional que permite probar algunas de las propiedades; además también están los archivos necesarios para descargarlos y usarlos en nuestros desarrollos web.
Gallery Focus
Sitio/demo/descargar: mediaupstream.com/sandbox/gallery-focus