Crear efecto spotlight con jQuery

Introducción

El efecto spotlight, literalmente efecto foco, consiste en un sencillo truco para captar toda la atención del usuario en un elemento de la página en la que estamos. Es un efecto muy utilizado a día de hoy, y gran parte de la culpa la tiene el hecho de que es relativamente sencillo de hacer como vamos a ver ahora mismo. Puedes ver el demo al final del post.

Maquetado. HTML

Para el HTML no nos compliquemos demasiado, simplemente usaremos una serie de imágenes cuando al pasar el ratón por encima se centre toda la atención del usuario en aquella imagen donde está situado.

Para ello, tendremos el siguiente código HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul id="listado">
	<li>
		<img src="img/img1.jpg" title="Imagen 1" alt="Imagen 1"/>
	</li>
	<li>
		<img src="img/img2.jpg" title="Imagen 2" alt="Imagen 2"/>
	</li>
	<li>
		<img src="img/img3.jpg" title="Imagen 3" alt="Imagen 3"/>
	</li>
	<li>
		<img src="img/img4.jpg" title="Imagen 4" alt="Imagen 4"/>
	</li>
	<li>
		<img src="img/img5.jpg" title="Imagen 5" alt="Imagen 5"/>
	</li>
	<li>
		<img src="img/img6.jpg" title="Imagen 6" alt="Imagen 6"/>
	</li>
</ul>

Cómo se puede ver el maquetado es muy simple, sólo un listado con imágenes en cada elemento. Pasemos al siguiente paso.

Estilos. CSS

Para que esto se empiece a parecer a lo que queremos al final, necesitamos darle estilos, de tal forma que centremos el listado, y hagamos que todas las imágenes queden juntas. Para ello usamos el siguiente CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

* {
	margin: 0px;
	padding: 0px;
}
 
body {
	font-family:arial;
	margin-top:70px;
}
 
img {border:none;}
 
#listado {
	width:612px;
	margin:0 auto;
}
 
#listado li {
	display:block;
	width:200px;
	height:200px;
	border:2px solid #666;	
	float:left;
	position:relative;
}
 
#listado .caption {	
	background:none repeat scroll 0 0 #000;
	display:none;
	left:2px;
	padding:3px;
	position:absolute;
	bottom:0px;
	width:190px;
	-moz-border-radius:5px;
	-wekbit-border-radius:5px;
	color:#3c9dd7;
}
 
.clear {
	clear:both;	
}
 
.effect {
	box-shadow: 0 0 10px #444;	
	-moz-box-shadow: 0 0 10px #444;	
	-webkit-box-shadow: 0 0 10px #444;	
}

Cabe destacar el uso de dos clases, caption y effect. La clase caption es la que tendrá los elementos span, visibles cuando se pase el ratón por encima. La clase effect, por otra parte, es simplemente la aplicación de la sombra para cuando el ratón está encima, que se podría eliminar y el efecto que intentamos conseguir no se vería afectado.

Funcionamiento. jQuery

Por último tenemos que añadir la parte de funcionamiento usando jQuery, que cuando pasemos el ratón por encima el resto de elementos casi desaparezcan, estableciendo su opacidad (opacity) a 0.1. La clave para hacer esto es el uso de un método: siblings.

El método siblings

El significado es importante para ilustrar mejor lo que hace. Sibling es una palabra formal en inglés que significa hermano (como brother). Se le puede pasar un selector de manera opcional.

Dado un conjunto de elementos, el método .siblings() devuelve el conjunto de todos los ‘hermanos’ de este elemento.

Veamos el ejemplo que tenemos en la página de documentación oficial.

1
2
3
4
5
6
7

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

1

$('li.third-item').siblings().css('background-color', 'red');

Este código establecerá todos los elementos del listado con el fondo rojo menos el tercero. Así que como puedes ver es muy útil para hacer casi desaparecer todos los elementos menos en el que tenemos el puntero.

Código jQuery

Finalmente tenemos el código jQuery que establecerá la clase necesaria cuando se produzca el evento hover y la quitará cuando no, además, mostrará y ocultará el “title” cuando corresponda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$('#listado li').each(function () {
	title = $(this).children().attr('title');
	$(this).append('<span class="caption">' + title + '</span>');	
	$(this).attr('title','');
	$(this).children('.caption').hide();
});
 
$('#listado li').hover(
	function () {
		$(this).siblings().stop(true, true).css({'opacity': '0.1'});	
		$(this).css({'opacity': '1.0'}).addClass('effect');
		$(this).children('.caption').show();	
	},
	function () {
		$(this).children('.caption').hide();		
	}
);
 
$('#listado').mouseleave(function () {
	$(this).children().fadeTo('100', '1.0').removeClass('effect');		
});

Edito: Para impedir tener problemas con las animaciones en cola de jQuery (error del que me ha avisado jävi), tenemos que añadir el método stop, de tal forma que si no se ha acabado el fadeTo, para hacer el efecto de menos a más opacidad, no interrumpa hacer el resto de elementos casi invisibles. Esto pasaba cuando se salía rápido del elemento y se volvía a entrar con el ratón, pero ya está solucionado.

Conclusiones

Este tutorial es bastante sencillo, pero puede ser aplicado a infinidad de cosas, la idea de la transparencia a 0.1 de todos los elementos menos uno para destacarlo o también se puede usar con divs en vez con elementos de un listado (li), cambiando el CSS, claro.