Fondo de triángulo colorido interactivo con JavaScript y Canvas-Triangles. js
| Autor: | Arathrix |
|---|---|
| Views Total: | 7,073 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 12, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Triángulos. js es una biblioteca independiente de JavaScript que utiliza la API 2D de canvas para generar un fondo de polígono colorido (triángulo, geométrico) con interacción del ratón.
Funcionamiento
Incluya la biblioteca de JavaScript de triángulos. js en la página HTML.
<script src="triangles.js"></script>
Cree un elemento canvas de HTML5 en su página HTML.
<canvas id="canvas"></canvas>
Cree un elemento alternativo para el efecto de interacción.
<div id="altBG"></div>
Los estilos CSS requeridos.
#canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
div {
position: absolute;
top: 0;
left: 0;
} El JavaScript.
var canvas = document.getElementById("canvas");
var altBG = document.getElementById("altBG");
var triangle = new TriangleBG({
canvas : canvas,
alternateElem : altBG,
cellHeight : 120,
cellWidth : 100,
mouseLight : true,
mouseLightRadius : 500,
mouseLightIncrement : 10,
resizeAdjustment : true,
variance : 1.3,
pattern : "x*y",
baseColor1 : {
baseHue : 120,
baseSaturation : 60,
baseLightness : 38
},
baseColor2 : {
baseHue : 120,
baseSaturation : 60,
baseLightness : 40
},
colorDelta : {
hue : 1,
lightness : 0,
saturation : 0
}
});
