Efecto tiltShift con CSS3 y tilShift.js

Creo que muchos hemos visto fotografías en las que parte del fondo parece desenfocado, esto para darle mas realce a ciertas zonas de la fotografía que nos interese. Veamos la siguiente imagen para entender mejor.

Pues bien, en esta ocasión haremos ese mismo efecto pero usando un plugin jQuery llamado tilShift.js que usa las nuevas capacidades de CSS3 para ayudarnos a realizar este efecto en nuestas fotos.

Para nuestro ejemplo tomaremos como base la siguiente fotografia

Primero debemos descargarnos el plugin desde aqui

Una vez descargado debemos asociar 3 archivos a nuestro HTML,

En el body insertamos nuestra imagen haciendo uso de los atributos data de HTML5.

Donde:
-position (0-100), define el punto de enfoque.
-blur (0-?), el radio de desenfoque en píxeles. 1 o 2 son generalmente buenos números.
-focus (0-100), la cantidad de área que está enfocada. 10 significaría que una décima parte de la imagen es nítida.
-falloff (0-100), la cantidad de área entre el enfoque y desenfoque completa.Cuanto más bajo sea el valor, más "apretado" es el fundido.
-direction (“x”, “y”, o 0-360), la dirección del efecto con cero a la derecha.

Ahora solo nos queda inicializar el plugin, para eso colamos debajo de los scripts anteriormente asociados a nuesto html el siguiente fragmento.

Con esto lograríamos tener nuestro efecto y tendriamos un resultado como el siguiente.

Espero que les haya ayudado y que disfruten probando las opciones que nos ofrece este plugin