Author: | Arathrix |
---|---|
Views Total: | 10,747 views |
Official Page: | Go to website |
Last Update: | July 12, 2015 |
License: | MIT |
Preview:

Description:
Triangles.js is a standalone JavaScript library which uses canvas 2D API to generate a colorful polygon (triangle, geometric) background with mouse interaction.
How to use it:
Include the triangles.js JavaScript library on the html page.
<script src="triangles.js"></script>
Create an Html5 canvas element on your html page.
<canvas id="canvas"></canvas>
Create an alternative element for the interaction effect.
<div id="altBG"></div>
The required CSS styles.
#canvas { position: absolute; top: 0; left: 0; z-index: 1; } div { position: absolute; top: 0; left: 0; }
The 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 } });