Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

GranimJS, transiciones con gradientes sencillas

GranimJS, transiciones con gradientes sencillas 02.FEB.17

Alvaro José Rios Ch
Fundador WebBizarro

Los gradientes son una forma sencilla de colocar un background agradable a tus sitios web, son relativamente fáciles de implementar con CSS sin embargo hoy vamos a hablar de hacer transiciones con gradientes para hacer efectos personalizados para tu sitio.

GranimJS es una librería JavaScript que te permite crear y controlar transiciones de una forma sencilla con gradientes, incluso puedes combinar la librería con jquery para poder cambiar los gradientes mediante clics en botones o en algún otro evento.

GranimJS es muy fácil de usar solo necesitas colocar un elemento canvas en el HTML y colocar un bloque JavaScript con el código siguiente.

var granimInstance = new Granim({
    element: '#canvas-basic',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#AA076B', '#61045F'],
                ['#02AAB0', '#00CDAC'],
                ['#DA22FF', '#9733EE']
            ]
        }
    }
});

Como pueden ver es muy simple de usar, en el campo states puedes colocar varios estados que puedes cambiar luego mediante el método changeState.

granimInstance.changeState('violet-state');

Una librería muy simple de usar y que seguro le va a dar un buen toque a tus sitios web.