Biblioteca de animaciones de degradados interactivos basados en canvas-Granim. js

Vista prévia

Descripción

Granim. js es una biblioteca de JavaScript ligera y libre de dependencia que ayuda a crear animaciones de degradados interactivas y configurables en un elemento canvas de HTML5.

Funcionamiento

Cree un elemento canvas de HTML5 en el que desee crear la animación de degradados.

<canvas id="canvas-demo"></canvas>

Inserte la versión minimizada del script Granim. js en su página HTML.

<script src="dist/granim.min.js"></script>

El código JavaScript para crear una animación de degradados básicos en el elemento canvas.

var granimInstance = new Granim({


element: '#canvas-demo',


states : {



"default-state": {





gradients: [







['#485563', '#29323c', '#29323c'],







['#00c6ff', '#0072ff', '#0072ff']





],





transitionSpeed: 10000



}


}
});

Todas las opciones de configuración predeterminadas.

var granimInstance = new Granim({



// CSS selector of canvas element


element: '',



// whether to add a dark / light class on the body depending on the gradient lightness, the class will be updated during the animation.


 // If you don't set a name, the class won't be set.


name: false,



// The element to set the dark / light class on


elToSetClassOn: 'body',



// 'diagonal', 'left-right', 'radial', 'top-bottom', or 'custom'


direction: 'diagonal',



// custom direction


customDirection: {



x0: '10%',



y0: '25px',



x1: '30%',



y1: '322px'


}



//
scroll debounce threshold (in ms)?


scrollDebounceThreshold: 300



// pause animation when out of view


isPausedWhenNotInView: false,



// opacity of each color of the gradient


opacity: '',



// Object containing all the states


// gradients (required): The different gradients with the different colors e.g. [ ['#FFF', '#000'], ['#000', '#FFF'] ].


// transitionSpeed: 500: Transition duration between each gradient.


// loop: true: Boolean When the animation has arrived to the last gradient, does it repeat?


states : {



"default-state": {





gradients: [







['#834d9b', '#d04ed6'],







['#1CD8D2', '#93EDC7']





],





transitionSpeed: 5000,





loop: true



},



"dark-state": {





gradients: [







['#757F9A', '#D7DDE8'],







['#5C258D', '#4389A2']





],





transitionSpeed: 5000,





loop: true



}


},



// name of the default state


defaultStateName: 'default-state'



// transition speed


stateTransitionSpeed: 1000,



// source (required): The source of your image, e.g. 'img/800x200.jpg'.


// position: ['center', 'center']: The position of your image in the canvas, represented as an [x, y] array.


// stretchMode: Does the image have to stretch ? This option is useful for liquid/responsive design. Represented as an [x, y] array.


// Possible values for x and y:


// 'stretch'


// 'stretch-if-smaller'


// 'stretch-if-bigger'


// blendingMode: How the image should blend with the gradient ?


image: {



source: '../assets/img/bg-forest.jpg',



position: ['center', 'bottom'],



stretchMode: ['stretch', 'stretch-if-bigger'],



blendingMode: 'multiply',


},,



// callback functions


onStart: function(){},


onGradientChange: function(colorDetails){},


onEnd: function(){},

});

Métodos de la API:

// Change state by putting its name in the argument
granimInstance.changeState('state-name');

// Play the animation
granimInstance.play();

// Pause the animation
granimInstance.pause();

// Stop the animation and clear the gradient
granimInstance.clear();

// Change the direction
granimInstance.changeDirection('direction-name');

// Change the blending mode (useful only if you use an image)
granimInstance.changeBlendingMode('blending-mode-name');

// Destroy an instance and remove its events listeners
granimInstance.destroy();

Funciones de devolución de llamada.

var granimInstance = new Granim({



// Triggered when the animation start.


onStart: false,



 // Triggered when a gradient change and loop.


onGradientChange: false,



// Triggered when the animation end.


onEnd: false

});

Events available

• granim: iniciar
• granim: fin
• granim: loop
• granim: gradientChange

var canvasElement = document.querySelector('#canvas-demo');
canvasElement.addEventListener('granim: iniciar', function(event) {


console.log(event);
});

Registro de cambios

v2.0.0 (11/12/2018)

• Agregue la dirección personalizada
• Agregue compatibilidad con otros tipos de color: RGB, RGBA, HSL, HSLA
• Agregue posiciones de color personalizadas
• La mejora del código

v1.1.1 (09/12/2018)

• Errores
• Las nuevas características
• Mejora