TriangleBanner Library

Description

The purpose of the this Javascript Library is to create a fast, and interesting option for a banner on websites. All of the project was done in pure javascript with no additional libraries needed.

How to use

To use the banner, you will need to include the banner and then create a new TriangleBanner object passing in the id of your canvas element. For example:

<script type="text/javascript" src="TriangleBanner.min.js"></script>
<script>
	var Banner = new TriangleBanner("your-canvas-id");
</script>

It is that simple to have a banner autogenerate with all the default settings. The canvas object can be of any size and the triangles will generate the fit the entire canvas. You must wrap the canvas in an object such as:

<div style="width: 100%; height: 40%"></div>

Customizations

How to use customizations

To use customizations, it is relatively simple. All you will have to do is add attributes to the canvas tag, for example:

<canvas id="canvas-id" outlineStyle=2 ></canvas>

This above will give the outlineStyle of 2 for the triangles. The following are all the options currently available:

outlineStyle

Outline style has 4 different options that you can use, which modify the line width of the canvas. The following options are available:

• 1 (default)
• 2
• 3
• 4

quality

This determines the quality of the triangles. It has 4 different options. Currently you have to manually assign the quality as it is defaults to 'High'. The options are:

• low
• med
• high (default)
• ultra

resize

This determines if the squares resize when the page is resized. This is off by default but you can turn it on by assigning 'true' for the value. The options are:

• true
• false (default)

triangleHeight

Triangle height is how you decide on the height of the triangle. They way it is calculated is 1/x of the height of the canvas, so if you passed in 16 the height of a triangles will range between 1/16th and 1/18th the canvas height (the upper range is always 2 more than the number passed in). The default is 6.

triangleWidth

Triangle width is how you decide on the width of the triangle. They way it is calculated is 1/x of the width of the canvas, so if you passed in 16 the width of a triangles will be 1/16th. The default is 6.

color

The color options lets you select the color of the randomly generated triangles. Currently you can select from the following options:

• blue
  
• brown
  
• gray
  
• green
  
• orange
  
• pink
  
• purple
  
• red
  
• white
  
• yellow
  

Those are the base options, you can customize the color more by passing in multiple colors with a '-' separated list, for example:

<canvas id="canvas-id" color=red-green ></canvas> 

animation

There are currently 6 different animations that are built in to the library by default, the different options are:

• 1, a random movement effect
  
• 2, a wave effect from right to left
  
• 3, a wave effect with a color changing effect also
  
• 4, a pure color changing effect from right to left
  
• 5, a wave with a fading color change
  
• 6, a wave with a non-fading color change
  

alternate

Alternate gives you the ability to make it so the the animation will go back and forth. This alternates the direction automatically. Options available:

• true
• false (default)

direction

This give the option for the direction of either left(1) or right(-1). These are the possible options:

• 1, left
• -1, right (default)

animationColors

Animation colors are used when use select animation 3 & 4 as it is the color changing animation. The same colors are available from the 'color' list, and you can use multiple colors also.

animationSpeed

This is an option to let you select the animation speed for the different animations, all of the animations have a default speed but you can override the default with this option. This option sets the interval speed in ms.

animationDelay

This gives you the ability to give the animation a delay between each cycle. The first animation is always played instantly, but you can set the amount of milliseconds between each cycle. The default is 0ms.

Development

Currently this product is still in development and should get more features as it moves along. Currently only the minified version is available as the main code is not up to a standard I want to release to the public.

License

Copyright 2017 Mitchell Woodhouse Mckenzie

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.