triangle-background
v0.2.4
Published
Creates a web page background of tesselating triangles with hover effect
Downloads
2
Readme
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-backgroundWithout 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.