Create Better Divi Headers

Particle Trails Background Effect for Divi Fullwidth Header Module

by | May 9, 2017 | 28 comments

If you use the Fullwidth Header module with fullscreen feature enabled and would like to apply a nice animated effect to its background then this tutorial might be what you are looking for. In this post I am suggesting a particle trails background effect for Divi Fullwidth Header Module and will show you how to implement it quickly and easily. Click the demo button below to see the end result.
Demo:
To implement this effect we’ll have to assign an id to the Fullwidth Header and apply neccessary settings, then insert the canvas with the animated effect using Javascript. We will also need a small CSS snippet to adjust the canvas position appropriately. Let’s do all this step by step.
Step 1:

After you enable the Page Builder for your post 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 with padding set to 0.

Step 2:

Apply following Fullwidth Header Module settings.

Step 3:

Add the particle_bg_effect id to Fullwidth Header Module Settings -> Custom CSS -> CSS ID field like it is shown in the screenshot below. If you already have an id assigned to the Fullwidth Header module then you shouldn’t add another one since an element is supposed to have only one id, in this case you will have to find the particle_bg_effect id in the Javascript and CSS code snippets below and replace every instance of it with your id.

Step 4:

This is the JS code snippet for the particle trails background effect. You can set the number of particles, particle speed, particle color and size of circle (see highlighted rows in the code below).

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

'use strict';

/* ---- CORE ---- */
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var windowWidth = canvas.width = window.innerWidth;
var windowHeight = canvas.height = window.innerHeight;
canvas.id = 'canvas';
document.getElementById('particle_bg_effect').insertBefore(canvas, document.getElementById('particle_bg_effect').firstChild);
/* ---- CORE END ---- */
/* ---- CREATING ZONE ---- */

/* ---- SETTINGS ---- */
var numberParticlesStart = 250; /* set particles number here */
var particleSpeed = 0.2; /* set particle speed here */
var velocity = 0.9;
var circleWidth;

 /* ---- RESPONSIVE CIRCLE SIZE ---- */
if ( $( window ).width() > 980 ) {
    circleWidth = 300; /* set circle width for desktop here */
} else if ( $( window ).width() < 981 && $( window ).width() > 479 ) {
        circleWidth = 200; /* set circle width for tablet here */
    } else {
            circleWidth = 150; /* set circle width for phone here */
        }

/* ---- INIT ---- */
var particles = [];

var getRandomFloat = function getRandomFloat(min, max) {
  return Math.random() * (max - min) + min;
};

/* ---- Particle ---- */
function Particle(x, y) {
  this.x = x;
  this.y = y;

  this.vel = {
    x: getRandomFloat(-20, 20) / 100,
    y: getRandomFloat(-20, 20) / 100,
    min: getRandomFloat(2, 10),
    max: getRandomFloat(10, 100) / 10
  };

  this.color = 'rgba(255, 205, 15, 0.05)'; /* set particle color here */
}
Particle.prototype.render = function () {
  context.beginPath();
  context.fillStyle = this.color;
  context.arc(this.x, this.y, 1, 0, Math.PI * 2);
  context.fill();
};
Particle.prototype.update = function () {

  var forceDirection = {
    x: getRandomFloat(-1, 1),
    y: getRandomFloat(-1, 1)
  };

  if (Math.abs(this.vel.x + forceDirection.x) < this.vel.max) {
    this.vel.x += forceDirection.x;
  }
  if (Math.abs(this.vel.y + forceDirection.y) < this.vel.max) {
    this.vel.y += forceDirection.y;
  }

  this.x += this.vel.x * particleSpeed;
  this.y += this.vel.y * particleSpeed;

  if (Math.abs(this.vel.x) > this.vel.min) {
    this.vel.x *= velocity;
  }
  if (Math.abs(this.vel.y) > this.vel.min) {
    this.vel.y *= velocity;
  }

  this.testBorder();
};
Particle.prototype.testBorder = function () {
  if (this.x > windowWidth) {
    this.setPosition(this.x, 'x');
  } else if (this.x < 0) {
    this.setPosition(windowWidth, 'x');
  }
  if (this.y > windowHeight) {
    this.setPosition(this.y, 'y');
  } else if (this.y < 0) {
    this.setPosition(windowHeight, 'y');
  }
};
Particle.prototype.setPosition = function (pos, coor) {
  if (coor === 'x') {
    this.x = pos;
  } else if (coor === 'y') {
    this.y = pos;
  }
};

/* ---- Functions ----*/
function loop() {
  var i = undefined;
  var length = particles.length;
  for (i = 0; i < length; i++) {
    particles[i].update();
    particles[i].render();
  }
  requestAnimationFrame(loop);
}

/* ---- START ---- */
function init() {
  var i = undefined;
  for (i = 0; i < numberParticlesStart; i++) {
    var angle = Math.random() * 360;
    particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth));
  }
}
init();
window.onresize = function () {
  windowWidth = canvas.width = window.innerWidth;
  windowHeight = canvas.height = window.innerHeight;
  particles = [];
  context.clearRect(0, 0, windowWidth, windowHeight);
  init();
};

window.addEventListener('click', function () {
  particles = [];
  context.clearRect(0, 0, windowWidth, windowHeight);
  init();
});

loop();

})(jQuery);

</script>
Update(Oct. 24, 2018)

If you want the particle animation to not to run continuously but stop at some point then replace the code inbetween the lines 105 – 139 (inclusive) of the JS provided above with this JS code below (note the highlighted line 15 – that’s where you can set the particle animation timeout in milliseconds):

/* ---- Functions ----*/
var pause = false;
function loop() {
 let i;
 const length = particles.length;
 for (i = 0; i < length; i++) {
 particles[i].update();
 particles[i].render();
 }
if(pause) return;
 requestAnimationFrame(loop);
}
// stop animation after a set amount of time
function pause_the_loop() { 
setTimeout( () => pause = true, 2000); /* set animation duration here (in ms) */
}

/* ---- START ---- */
function init() {
 var i = undefined;
 for (i = 0; i < numberParticlesStart; i++) {
 var angle = Math.random() * 360;
 particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth));
 }
}
init();
window.onresize = function () {
 windowWidth = canvas.width = window.innerWidth;
 windowHeight = canvas.height = window.innerHeight;
 particles = [];
 context.clearRect(0, 0, windowWidth, windowHeight);
 init();
};

window.addEventListener('click', () => {
 pause = false;
 particles = [];
 context.clearRect(0,0, windowWidth, windowHeight);
 init();
 loop();
 pause_the_loop();
});

loop();
pause_the_loop();
Copy the JS code snippet above and paste 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 down and doesn’t create horizontal scrollbar, for this we’ll use the following CSS code:

/* Particle Trails Background Effect */

#particle_bg_effect canvas#canvas {
    position: absolute;
    left: 0px;
}
@media all and (min-width: 1025px) {
    #particle_bg_effect canvas#canvas {
        left: -20px;
    }
}

/* End Particle Trails Background Effect */
Copy the CSS code snippet above and add it into the Divi -> Theme Options -> General -> Custom CSS field.
That’s all, save everything and enjoy the effect. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! ;)

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!