Triangle-background

Creates a web page background of tessellating triangles with hover effect

Download .zip Download .tar.gz View on GitHub

Triangle Background

Creates a tessellating triangle background for your web page, with rollover highlight effect

Usage

new TriangleBackground(
    containerElement,    // A DOM element, or CSS selector
    options              // Object containing options
);

Option Reference

options: {
    color: [],                   // Specify the colours to use for the triangles, must be an array of hexadecimal style colours, defaults to a selection of greys
    mouseHoverHighlight: {       // Options for the hover highlight effect, replace with false to disable
        color: '#ffffff'         // Hover highlight colour in hex format (default '#ffffff')
        radius: 100              // Hover highlight radius (default 100)
    }
}

Installing

With NPM

npm install --save triangle-background

Without NPM

Download and extract latest zip file into your project: https://github.com/joestrong/triangle-background/releases

Getting Started

With Browserify

var TriangleBackground = require('triangle-background');

new TriangleBackground('#background');

Without Browserify

<!doctype html>
<html>
<body>
<div id="background"></div>
<script src="node_modules/triangle-background/dist/triangle-background.min.js"></script>
<script>
    new TriangleBackground('#background');
</script>
</body>
</html>

Notes

As the background DOM element will be given position fixed, other elements will need to be positioned (e.g. relative) to appear above the background.