Crear Fondo de degradado animado con JavaScript-gradientify. js
| Autor: | karolsw2 |
|---|---|
| Views Total: | 2,542 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 1, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
gradientify. js es un pequeño plugin de JavaScript que hace uso de HTML y CSS sin formato para crear un fondo de degradado animado para cualquier elemento contenedor.
Funcionamiento
Importe el archivo JavaScript ' gradientify. js ' en el archivo HTML.
<script src="build/gradientify.js"></script>
Cree un nuevo objeto Gradientify.
new Gradientify()
Especifique el elemento contenedor en el que desea aplicar el fondo de degradado animado.
new Gradientify({
element: document.body
}) Defina una matriz de degradados utilizando la función de lineal-gradiente () de CSS.
new Gradientify({
element: document.body,
gradients: [
`linear-gradient(60deg, rgb(255, 0, 0), rgb(0, 0, 255))`,
`linear-gradient(10deg, rgb(25, 123, 23), #ff22af)`,
`radial-gradient(rgb(25, 123, 223), red)` // All valid CSS gradients are supported
]
}) Establezca la posición del fondo de degradado.
new Gradientify({
element: document.body,
gradients: [
`linear-gradient(60deg, rgb(255, 0, 0), rgb(0, 0, 255))`,
`linear-gradient(10deg, rgb(25, 123, 23), #ff22af)`,
`radial-gradient(rgb(25, 123, 223), red)` // All valid CSS gradients are supported
],
fixed: false
}) Configuración del efecto de transición del fondo de degradado.
new Gradientify({
element: document.body,
gradients: [
`linear-gradient(60deg, rgb(255, 0, 0), rgb(0, 0, 255))`,
`linear-gradient(10deg, rgb(25, 123, 23), #ff22af)`,
`radial-gradient(rgb(25, 123, 223), red)` // All valid CSS gradients are supported
],
fixed: false,
delay: 0,
interval: 5000
}) Registro de cambios
07/01/2018
- Corrija los colores degradados RGB
