Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

triangle-background

0.2.4 • Public • Published

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.

Keywords

none

install

npm i triangle-background

Downloadsweekly downloads

1

version

0.2.4

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability