Creates a web page background of tesselating triangles with hover effect
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
LICENCE.md
README.md
gulpfile.js
package.json

README.md

Triangle Background

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

Demo

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 the 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.