Pulse Effect in JavaScript: Create an Animated Background

In this blog post, we’ll look at how to use JavaScript and CSS to make a responsive background full of hexagons and randomly add a pulse effect animation. One hexagon will animate at a time with a random interval between them.

See a demo of what you will get at the end of this tutorial:

See the Pen Simple Show/Hide Toggle Sliding Menu With CSS & JavaScript by WebTutorialSource (@webtutorialsource) on CodePen.

Setting Up The Container

Let’s start with the HTML code for our background. We’ll use a div element with a class of .background to contain all of our hexagons.

HTML

<div class="background"></div>

CSS Animation And Shape

Now let’s move on to the CSS. In this tutorial, I chose to use hexagons but you can change to any shapes you like. We create a .hexagon class to style our hexagons. Here, we are going to use the CSS clip-path property which is great to create complexe shapes. We also need to create a .pulse class that will be used to add our pulse animation effect.

CSS

.hexagon {
  position: absolute;
  width: 90px;
  height: 100px;
  background-color: #134d58;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0.6;
}

.pulse {
  animation: pulse 1s ease-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  60% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}

Put Everything Together With JavaScript

With JavaScript, we select the .background element and set the width and height variables to the width and height of the window. You can change the default values to get the result you want like the height and width of the hexagons, padding and max/min interval between animations.

JavaScript

const background = document.querySelector(".background");
let width = window.innerWidth;
let height = window.innerHeight;

// Default values
let shapeWidth = 50;
let shapeHeight = 80;
let padding = 10;
let maxInterval = 600;
let minInterval = 200;

Add a function that will create a grid of hexagons that covers the entire window.

JavaScript

function placeElements() {
  for (let i = 0; i < width / (shapeWidth + padding); i++) {
    for (let j = 0; j < height / (2 * (shapeHeight + padding)); j++) {
      let x = i * (shapeWidth + padding);
      let y = j * (2 * (shapeHeight + padding));
      if (i % 2 === 1) {
        y += (shapeHeight + padding);
      }
      let hexagon = document.createElement("div");
      hexagon.classList.add("hexagon");
      hexagon.style.left = x + "px";
      hexagon.style.top = y + "px";
      background.appendChild(hexagon);
    }
  }
}

Next, we add a resize event listener to the window to reset the background and adjust the positioning of the shapes.

JavaScript

window.addEventListener("resize", () => {
  // Reset by removing all hexagon elements
  background.innerHTML = '';
  width = window.innerWidth;
  height = window.innerHeight;

  placeElements();
});

Now let's add the pulse animation effect to the hexagons. For that we need a pulse function that selects a random hexagon and adds the .pulse CSS class to it. The function is then called repeatedly using the setInterval. This function also allows to animation an hexagon that has already been animated before by removing and adding back the .pulse class.

JavaScript

function pulse() {
  let hexagons = Array.from(background.children);
  let randomIndex = Math.floor(Math.random() * hexagons.length);
  let randomHexagon = hexagons[randomIndex];
  randomHexagon.classList.remove("pulse");

  setInterval(function(){
    randomHexagon.classList.add("pulse");
  }, 10);
}

setInterval(pulse, Math.floor(Math.random() * maxInterval + minInterval));

Here is the full JavaScript code.

JavaScript

const background = document.querySelector(".background");
let width = window.innerWidth;
let height = window.innerHeight;

// Default values
let shapeWidth = 50;
let shapeHeight = 80;
let padding = 10;
let maxInterval = 600;
let minInterval = 200;

// Init background
placeElements();

function placeElements() {
  for (let i = 0; i < width / (shapeWidth + padding); i++) {
    for (let j = 0; j < height / (2 * (shapeHeight + padding)); j++) {
      let x = i * (shapeWidth + padding);
      let y = j * (2 * (shapeHeight + padding));
      if (i % 2 === 1) {
        y += (shapeHeight + padding);
      }
      let hexagon = document.createElement("div");
      hexagon.classList.add("hexagon");
      hexagon.style.left = x + "px";
      hexagon.style.top = y + "px";
      background.appendChild(hexagon);
    }
  }
}

window.addEventListener("resize", () => {
  background.innerHTML = '';
  width = window.innerWidth;
  height = window.innerHeight;

  placeElements();
});

function pulse() {
  let hexagons = Array.from(background.children);
  let randomIndex = Math.floor(Math.random() * hexagons.length);
  let randomHexagon = hexagons[randomIndex];
  randomHexagon.classList.remove("pulse");

  setInterval(function(){
    randomHexagon.classList.add("pulse");
  }, 10);
}

setInterval(pulse, Math.floor(Math.random() * maxInterval + minInterval));

Hope you enjoyed this tutorial and don't forget to share if you did.