Per creare l’effetto tilt shift si può usare jQuery e il plugin Tiltshift.js senza dover modificare le immagini presenti nella pagina. JQuery TitShift è semplice da utilizzare ed è rilasciato con licenza GPL.

Attenzione: jQuery TitShift è compatibile al momento solo con Chrome e Safari 6.

Creare l'effetto tilt shift con jQuery

Creare l’effetto tilt shift con jQuery

Creare l’effetto Tilt Shift

Scaricare e includere nell’intestazione del documento una copia di jQuery, il foglio di stile jquery.tiltShift.css e il plugin (scarica dal sito ufficiale).

<link rel="stylesheet" href="css/jquery.tiltShift.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.tiltShift.js"></script>

Subito dopo inserire un altro elemento script per attivare jQuery Tiltshift.js.

<script>
  $(function() {
    $('.tiltshift').tiltShift();
  });
</script>

Le immagini a cui applicare l’effetto tilt shift devono essere inserite in un elemento qualsiasi, nell’esempio è un elemento li, a cui va assegnata la classe frame. La classe tiltshift, presente nelle immagini, serve solo per distinguere le immagini a cui applicare l’effetto da tutte le altre ma, a tale scopo si può usare qualsiasi altro selettore css.

<ul>
<li class="frame"> <img src="images/1.png" class="tiltshift" data-position="55" data-blur="2" data-focus="15" data-falloff="10" data-direction="y" alt=""> </li>
<li class="frame"> <img src="images/3.png" class="tiltshift" data-position="55" data-blur="2" data-focus="15" data-falloff="10" data-direction="y" alt=""> </li>
</ul>

Le immagini conterranno una serie di attributi personalizzati, che sono utilizzati per controllare il comportamento del plugin. Nell’esempio sono stati utilizzati alcuni attributi:

  • data-position: posizione della parte nitida dell’immagine indicata con valori compresi tra 0 e 100
  • data-blur, indica il raggio di sfocatura (1,2)
  • data-focus: indica la parte non sfocata dell’immagine, ammette valori tra 0 e 100
  • data-falloff: area di transizione tra la zona a fuoco e quella sfocata, ammette valori tra 0 e 100
  • data-direction, imposta la direzione dell’effetto che può essere orizzontale (x) o verticale (y), oppure si può specificare l’angolo da 0 a 360

Ulteriori informazioni ed esempi sulle opzioni del plugin sono disponibili nel sito ufficiale.