Gallery Focus... desenfocando elementos por proximidad

Escrito por: Martín el 11-10-2011 14:16:53 y leído 983 veces

Gallery Focus es un plugin escrito en javascript y basado en la librería jQuery, que nos permite desenfocar (hacer fade) elementos según proximidad. Es decir, según donde ubiquemos el ratón, podemos desenfocar todos los elementos alrededor del puntero con opciones personalizables.

Su implementación es muy sencilla, se debe definir el tamaño del área a desenfocar, la opacidad del resto de elementos no afectados por el desenfoque y si persigue al ratón o no, y algunas opciones más... pero las importantes son éstas 3 que mencioné.

Quiero demo, quiero bajarlo, quiero saber usarlo...
Vale, no desesperes, es muy fácil de usar, bajar y probar. Te dejo el enlace de su creador, Derek Anderson, y, al ver la demo, ya entenderás lo que yo no sé explicar con palabras fáciles XD.

Código JAVASCRIPT

/* ## BASIC USAGE ## */

$('#gallery img').galleryFocus();


/* ## OPTIONS ## */

$('#gallery img').galleryFocus({
  // 'radius' - default: 400 - set the source radius size
  'radius': 800,
  
  // 'fadeTo' - default: 0.2 - the min/max value to fade elements to
  // depending on the value of 'invert'
  'fadeTo': 0.0,
  
  // 'source' - default: 'cursor' - if set to a class or ID
  // the source will be the center of that DOM element
  'source': '#source-div',
  
  // 'invert' - default: false - Inverts the direction in which elements
  // fade from the 'source'
  'invert': true,
  
  // 'overlay' - default: false - displays an overlay to visualize the
  // 'source' influence
  'overlay': true
});


/* ## METHODS ##

- overlay (value)
- update ()
- source (value)
- set (key, value)
- get (key)

Usage is as follows:
*/

// toggle overlay on/off
$('#gallery img').galleryFocus('overlay', true);

// updates cached positions of all elements, may be required in some cases
$('#gallery img').galleryFocus('update');

// set to 'cursor' to bind source to the cursor, or set to a single DOM element
// eg: '#some-div' or '.a-single-element'
$('#gallery img').galleryFocus('source', 'cursor');

// changes the options value
$('#gallery img').galleryFocus('set', 'radius','200');

// returns the options value
$('#gallery img').galleryFocus('get','radius'); 

Categorías: Jquery • Blur • Desenfoque •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

desenfocar jquery • jscrollpane horizontal galeria • desenfocar un div • jquery overlay • desenfocar con jquery • photoshop desenfocar proximidad • focos martin iglesias • desenfocar div css • galleryFocus UI • inverted scroll jquery • fade in gallery lateral jquery • elementos de un focus • max size gallery jquery • css jquery desenfocar foto • jquery gallery focus • mascara con jquery default con value • javascript desenfocar • desenfocar elementos web • desenfoque menu con jquery • desenfocar foto jquery • desenfocar foco flash • proximidad raton html5 • jquery set focus • evento al desenfocar con php • jquery opacidad elementos activos • uso de return $(element) find valid jquery length • desenfoca blog • desenfocar imagen en jquery •