Animated Grid Background Effect for Divi Fullwidth Header Module

by | May 15, 2017 | 0 comments

This is the second tutorial of my animated background effects series, the previous one got a very good response from the Divi community and I am really greatful for that. In this tutorial I will show how to implement the animated grid background effect again for the Fullwidth Header module. View the demo and let’s implement it step by step, as usually.
Demo:
To implement this effect we’ll have to assign an id to the Fullwidth Header and apply neccessary settings, then insert the canvas inside the Fullwidth Header section and then apply the animated grid effect using Javascript. The canvas positioning will need a small adjustment and will use CSS for that.

Step 1:

Enable the Divi Builder for your post, then go to Divi Post Settings and set the Page Layout to “Full Width” and Post Title to “Hide”, then add the Fullwidth Header module in a fullwidth section having 0 padding.

Step 2:

The most important settings for this effect are the fullscreen mode, you need to enable it in the Fullwidth Header Module Settings, and the background color. The rest of the settings are totally up to you. Personally, I like blue and yellow colors, so, I’ve chosen dark blue color for the background and yellow for the grid ( grid color is set in the JS code below ).

Step 3:

Add the grid_bg_effect_container id to Fullwidth Header Module Settings -> Custom CSS -> CSS ID field. If you already have an id assigned to the Fullwidth Header module then you shouldn’t add another one because an element must have only one id assigned to it, in such a case you will have to find the grid_bg_effect_container id in the JS and CSS snippets below and replace each and every instance of it with your id.

Step 4:

This is the JS code snippet for the animated grid background effect. You can set the grid row and column numbers, size of squares, make grid color static or animated, change speed of animation, etc (see highlighted and commented lines in the code below).

<script type="text/javascript">
/*  Animated Grid Background Effect */
(function($) {

       /* insert canvas inside the fullwidth header container */
       $( "#grid_bg_effect_container" ).prepend( "<canvas id='grid_bg_effect'></canvas>" ); 

(function(main) {
    main();
  })(function() {

    'use strict';

    var c = document.getElementById('grid_bg_effect');
    var ctx = c.getContext('2d');
    var W = c.width = window.innerWidth;
    var H = c.height = window.innerHeight;
    var CX = W / 2;
    var CY = H / 2;

    var Square = function(x, y, size, color) {
      this.x = x;
      this.y = y;
      this.size = size;
      this.color = color;
      this.angle = Math.random() * Math.PI * 2;
      this.resize = 1;
    };

    Square.prototype = {
      constructor: Square,
      update: function() {
        this.color += 1; /* set speed of color change */
        this.angle += 0.08; /* set speed of grid animation */
        this.resize = 1 + Math.cos(this.angle) * 0.2; /* set grid resize scale */
      },
      render: function(ctx) {
        ctx.save();

        /* DO NOT USE THE FOLLOWING 2 LINES AT THE SAME TIME */
          /* ctx.fillStyle = 'hsla(' + this.color + ', 100%, 50%, 1)'; */ /* uncomment this line to enable animated grid color */
          ctx.fillStyle = '#ffcc00'; /* set static grid color here */
        ctx.translate(this.x, this.y);
        ctx.scale(this.resize, this.resize);
        ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
        ctx.restore();
      }
    };

    var size = 50; /* set grid size */
    var square = null;
    var squares = [];
    var maxCol = 20; /* set grid column number */
    var maxRow = 10; /* set grid row number */
    var x = CX - (size / 2) * (maxCol - 1);
    var y = CY - (size / 2) * (maxRow - 1);

    for(var row = 0; row < maxRow; row++) {
      x = CX - (size / 2) * (maxCol - 1);
      for(var col = 0; col < maxCol; col++) {
        square = new Square(x, y, size * Math.random(), Math.random() * 100);
        squares.push(square);
        x += size;
      }
      y += size;
    }

    requestAnimationFrame(function loop() {
      requestAnimationFrame(loop);

      ctx.clearRect(0, 0, W, H);

      for(var i = 0; i < squares.length; i++) {
        square = squares[i];
        square.update();
        square.render(ctx);				
      }

    });
    
  });

})(jQuery);

</script>

 

Copy the JS code snippet and add it into the Divi -> Theme Options -> Integration -> Add code to the < body > field.

Step 5:

The canvas positioning needs to be adjusted so that it doesn’t push the Fullwidth Header contents and fits the screen, for this we’ll use the following CSS snippet:

/* Animated Grid Background Effect */
canvas#grid_bg_effect { 
    display: block; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 100%; 
    transform: translate(-50%, -50%); 
}

We can also make the header content background semi-transparent and add some padding to it to make the content more readable:

/* Header contents background */ 
#grid_bg_effect_container.et_pb_fullwidth_header .et_pb_fullwidth_header_container .header-content { 
    background: rgba(0, 0, 0, 0.65); 
    padding: 25px; 
}

Copy the CSS snippets above and add them into the Divi -> Theme Options -> General -> Custom CSS field.

That’s all, enjoy the effect. Feel free to share your thoughts and suggestions below and don’t forget to subscribe to updates to stay connected! 😉

Inspired by: Grid

Pin It on Pinterest

Shares