Philter: asigna filtros de CSS directamente con atributos HTML
Philter es un plugin de javascript que te permite controlar los filtros de CSS directamente con atributos HTML, así como un efecto de transición con el hover definiendo la duración de la animación.
El plugin cuenta con 2 versiones, una para usar con javascript puro y otra como plugin de jQuery:
philter.js
philter.min.js
jquery.philter.js
jquery.philter.min.js
Modo de uso
1. Incluye el archivo del plugin (cualquiera de los de arriba).
<script src="philter.min.js"></script>
2. En una etiqueta script o un archivo incluido después del archivo, inicia el plugin declarando una nueva instancia:
new Philter({
transitionTime: 1 // Segundos
});
3. Asigna el filtro al elemento del DOM directamente a través del atributo data-philter-< filter >. Si pasas 2 valores separados por un espacio en blanco, el primero será el valor asignado por defecto y el segundo se asignará al hacer hover mediante una transición que va a durar el tiempo definido en el punto de arriba.
<div data-philter-blur="0 2">
<img src="path/to/image.jpg">
</div>
Filtros soportados
Para la mayoría de los filtros los valores van de 0 a 100.
- blur
- grayscale
- hue-rotate
- saturate
- sepia
- contrast
- invert
- opacity
- brightness
- color (necesita 2 valores, el color en hexadecimal y la opacidad. No soporta transición)
Página: http://specro.github.io/Philter