Gallery Focus – Plugin jQuery que desenfoca elementos por proximidad (by: http://pixelcoblog.com)


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 plugin jquery Gallery Focus   Plugin jQuery que desenfoca elementos por proximidad

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

Otras lecturas



original post: http://bit.ly/mUyCSm

via ifttt
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: