Shine.js es una propuesta nueva e interesante para aquellas personas que buscan una manera rápida y sencilla de animar sombras, algo a lo que no estamos muy acostumbrados.
La idea de este proyecto es simple, brindar un mecanismo que permita manipular muy fácilmente las distintas sombras utilizadas en nuestro proyecto, permitiendo cambiar su inclinación, expansión y hasta su densidad, todo esto de forma dinámica y con apenas unas lineas de código.
Un aspecto que me parece interesante de esta biblioteca es que permite vincular las sombras dispuestas en nuestro proyecto con la interacción generada por el usuario, es así que por ejemplo, podemos variar las sombras según la posición del puntero del raton, o bien según la barra de desplazamiento del navegador.
Ejemplo de uso:
// all parameters are optional and can be changed later
var config = new shinejs.Config({
numSteps: 4,
opacity: 0.2,
shadowRGB: new shinejs.Color(255, 0, 0)
});
// pass the config in the constructor
var shineA = new Shine(document.getElementById('my-shine-object-a'), config);
var shineB = new Shine(document.getElementById('my-shine-object-b'), config);
// or assign it to an instance later
var shineC = new Shine(document.getElementById('my-shine-object-c'));
shineC.config = config;
shineC.draw();
Si todavía no logran entender bien el funcionamiento de esta biblioteca los invito a visitar la demostración en linea.
El proyecto no tiene demasiada ciencia, sin embargo como siempre recomiendo leer la documentación oficial para aprovechar al máximo las posibilidades de esta herramienta.
ShineJS es un proyecto liberado bajo licencia MIT garantizando su libre uso tanto en proyectos personales como comerciales.
