jQuery: effetto faretto (spotlight)

Le proprietà CSS3 text-shadow e box-shadow accettano quattro valori: la coordinata x, la coordinata y, il raggio e il colore dell'ombra. Possiamo sfruttare i primi tre valori per creare un effetto faretto (spotlight) con jQuery. Vediamo come.

Abbiamo un semplice elemento HTML che contiene al suo interno un elemento vuoto:

<h1>Test<span></span></h1>

Sarà appunto quell'elemento vuoto a creare l'effetto. Prepariamo il nostro "palcoscenico" con i CSS:

body {
	margin: 0;
	padding: 0;
	background: #000;
}

h1 {
	margin: 0.5em auto;
	padding: 0.5em;
	font: normal 8em "Arial Black", Arial, sans-serif;
	width: 600px;
	height: 600px;
	line-height: 600px;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 0 #ffc;
	cursor: pointer;
	position: relative;
	background: #000;
	text-transform: uppercase;
}

h1 span {
	width: 360px;
	height: 360px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -180px 0 0 -180px;
	box-shadow: 0 0 0 #ffc;
	border-radius: 12px;
}

L'elemento vuoto partirà in posizione centrata sia in orizzontale che in verticale tramite il posizionamento contestuale. Come si può notare, i primi tre valori delle proprietà text-shadow e box-shadow sono inizialmente impostati su zero. Verranno modificati dinamicamente con jQuery:

$(function() {
  
  var factor = 24;

  $('h1').mousemove(function(event) {
  
    var x = event.clientX - $(this).width();
    var y = event.clientY - $(this).height();
    
    $(this).css('textShadow', x + 'px' + ' ' +  y + 'px' + ' ' +  factor + 'px' + ' ' +  '#ffc').
    find('span').css('boxShadow',    x + 'px' + ' ' +  y + 'px' + ' ' +  factor + 'px' + ' ' + '#ffc');
  
  
  });

});

Le coordinate orizzontali (x) e verticali (y) delle proprietà CSS3 vengono calcolate sottraendo alla posizione orizzontale e verticale del mouse la larghezza e l'altezza dell'elemento principale. Viene aggiunto infine un fattore (24) per il raggio delle ombre. Come si può notare, stiamo usando l'evento mousemove per fare in modo che sia il mouse a spostare il faretto.

Potete visionare l'esempio finale in questa pagina.