jQuery Plugin To Generate Triangle Background Pattern

1. Introduction

Triangularize is a simple jQuery plugin that generates a beautiful triangle background pattern. The plugin can be used to cover any HTML element on the website. It is easy to install and has many customization options.

Jquery plugin generating triangular background grid

2. Plugin Overview

Library	Triangularize
Author	Daniel Baliczek
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version

Demo

3. How to install and use Triangularize jQuery plugin

Follow the below steps to install Triangularize jQuery plugin on your website.

3.1. Load the required jQuery library:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

3.2. Add Triangularize CSS styles in a separate file or put them inside the `sstyle` tag on your website:

.triangle, .upsdwn-triangle{
  position: absolute; 
} 

#triangle-box {
    overflow: hidden;
    background-color: #333;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.content {
    position: relative;
    z-index: 4000;
    color: #F09909;
    top: 50%;
    transform: translate(0, -50%);
}

.caption {
    text-align: center;
    z-index: 4000;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    padding: .5em;
    background-color: #333;
    color: #F09909;
}

.caption p {
    margin: 0;
    padding: 0;
    color: #F09909;
}

.caption a {
    text-decoration: underline;
    color: #F09909;
}

.caret {
    cursor: pointer;
    transform: rotate(-45deg);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 10px;
    border-bottom: 4px solid #F09909;
    border-left: 4px solid #F09909;
}

3.3. Add Triangularize JavaScript code:

 $.fn.trianglarize = function(options) {
    var settings = $.extend(
      {
        triHeight: 100,
        spacingV: 0,
        spacingH: 0,
        triColor: "#00DDFF",
        triColorU: "#DD00FF",
        startUpsdwn: false
      },
      options
    );
    var triHeight = settings.triHeight; 
    var startUpsdwn = settings.startUpsdwn;
    var spacingV = settings.spacingV;
    var spacingH = settings.spacingH;
    var triColor = settings.triColor;
    var triColorU = settings.triColorU;

    var triWidth = triHeight / Math.sqrt(3) * 2;
    triCountH = this.width() / triWidth + 1;
    triCountV = this.height() / triHeight;
    for (i = 0; i < triCountV; i++) {
      var upsdwn = startUpsdwn;
      var offset = 0;
      var hOffset = 0; 
      var offset = 0 - triWidth / 2; 
      for (j = 0; j < triCountH * 2; j++) {
        if (upsdwn) {
          var tmp = i * triHeight + spacingV*i;
          this.append(
            '<div class="upsdwn-triangle" style="top: ' +
              tmp +
              "px; left: " +
              ((j * (triWidth / 2)) + offset + (spacingH*j)) +
              'px;"></div>'
          );
        } else {
          var tmp = i * triHeight + spacingV*i; 
          this.append(
            '<div class="triangle" style="top: ' +
              tmp +
              "px; left: " +
              ((j * (triWidth / 2)) + offset + (spacingH*j)) +
              'px;"></div>'
          );
        }
        upsdwn = !upsdwn;
      }
      startUpsdwn = !startUpsdwn;
    }
    $(".triangle").css("border-left", triWidth / 2 + "px solid transparent");
    $(".triangle").css("border-right", triWidth / 2 + "px solid transparent");
    $(".triangle").css("border-bottom", triHeight + "px solid " + triColor);
    $(".upsdwn-triangle").css(
      "border-left",
      triWidth / 2 + "px solid transparent"
    );
    $(".upsdwn-triangle").css(
      "border-right",
      triWidth / 2 + "px solid transparent"
    );
    $(".upsdwn-triangle").css(
      "border-top",
      triHeight + "px solid " + settings.triColorU
    );
    return this;
  };

3.4. Initialize the library:

$(document).ready(function() {
  $("#triangle-box").trianglarize({
    triHeight: 12,
    triColor: '#252525',
    triColorU: '#404040',
    spacingV: 6,
    spacingH: 8
  });
});

4. Conclusion

In this article, we presented Triangularize jQuery plugin that generates a triangular grid. The plugin is a great alternative to using image patterns for the background. Triangularize comes with many customization options, that you can use to adopt the look to match your website.