Raindrops

Animated ripples.

by the_voder

HTML

<!DOCTYPE html>
<html lang="EN">

  <head>
    <title>wave zen</title>
  </head>

  <body>

    <div class="container">
    </div>

  </body>

</html>

CSS

* {
    padding: 0;
    margin: 0;
    list-style: none;
}

:root {
    --background-color: #fafafa;
    /* maybe change to a background img */
    --border-color: #7591AD;
    --text-color: #34495e;
    --color1: #EC3E27;
    --color2: #fd79a8;
    --color3: #0984e3;
    --color4: #00b894;
    --color5: #fdcb6e;
    --color6: #e056fd;
    --color7: #F97F51;
    --color8: #BDC581;
}

body {
    height: 100vh;
}

.wave {
    position: absolute;
    /*
    Width and height set in JavaScript
    width: 400px;
    height: 400px;
    */
    display: flex;
    justify-content: center;
    align-items: center;
}

.wave span {
    position: absolute;
    background-color: var(--color3);
    box-sizing: border-box;
    border-radius: 100%;
    animation: animate 3s linear 30s;
    animation-delay: calc(0.7s * var(--i));
}

@keyframes animate {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        /* Width changed to % units */
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}

JavaScript

// Requires jQuery

$(document).ready(function() {

  // This is the HTML for one of our animated circle elements
  // (have to remove line-breaks)
  const circleMarkup = '<div class="wave"><span style="--i:1"></span><span style="--i:2"></span><span style="--i:3"></span><span style="--i:4"></span><span style="--i:5"></span><span style="--i:6"></span><span style="--i:7"></span><span style="--i:8"></span></div>';

  // Stores count of circle elements
  var counter = 0;
  // Maximum number of circles to exist simultaneously
  var maxCount = 10;

  // Function to pick random color from array
  // Colors defined in CSS as CSS Variables/Custom Properties
  function randomColor() {
    // Array of colors (refers to color variables defined in CSS)
    const colors = [
      "var(--color1)",
      "var(--color2)",
      "var(--color3)",
      "var(--color4)",
      "var(--color5)",
      "var(--color6)",
      "var(--color7)",
      "var(--color8)"
    ];	
    // Create random index for colors array
    // Generate random integer between 0 and length of array - 1 (arrays are 0-indexed)
    var index = Math.round(Math.random() * (colors.length - 1));
    // Return random item from array
    return colors[index];
  }; // End random color function

  // Random size between minSize and maxSize
  function randomSize() {
    var maxSize = $(document).width() / 2;
    var minSize = maxSize / 2;
    return Math.round(Math.random() * (maxSize - minSize)) + minSize;
  }; // End random size function

  // Bind to clicks on body element (anywhere on page)
  $("body").on("click", function(e) {
    // Only create new circle if counter less than maxCount
    if (counter < maxCount) {

      // Life-span of circle (milliseconds)
	  // Adjust if changing length of CSS animation
      var lifeSpan = 10000;

      // Get random color using function above
      var randColor = randomColor();
      
	  // Get random size using function above
	  var randSize = randomSize();
	  
	  // Half...