VintageJs es un plugin jQuery para darle efecto vintage a cualquier fotografía aprovechando el canvas de HTML5. El plugin nos ofrece 3 efectos que podemos personalizar.
Como sabéis, este plugin al utilizar HTML5, necesita un navegador que lo soporte. En concreto, el testeo de esta aplicación se hizo sobre Mozilla FireFox 3.16.14, Google Chrome 9.0.597.107, Safari 5.0.3, Opera 11.01 e Internet Explorer 9.
¿Cómo funciona VintageJs?
Lo primero que tenemos que hacer es linkar con las hojas de estilo y bibliotecas necesarias dentro de la etiqueta «head» de nuestra página.
[html]
[/html]
Ahora vamos a inicializar el plugin para añadir un evento Listener a las imagenes para crear el efecto Vintage. En este caso usaremos la función Click para ver el efecto:
[javascript]
[/javascript]
Ahora cada imagen que pongamos en nuestro sitio con la clase «vintage», tendrá el efecto que podemos configurar con este código:
[javascript]
[/javascript]
Hay varios efectos que podemos configurar (Cito):
- default: the default preset is used when no preset is given
- sepia: sepia effect
- grayscale: turns image into grayscale image
- custom: Only curves will be adjusted, all the other effects are switched off so that you can build your own vintage look
NOTA: Para usar VintageJs necesitas la última versión de jQuery.
