Ola Dots

An example of a ball approaching a dor for the library Ola

by Francisco Presencia Fandos

HTML

<script src="https://cdn.jsdelivr.net/npm/ola@1/ola.min.js"></script>
<h1>Dots</h1>
<div class="balls"></div>

CSS

body {
  margin: 0;
  padding: 10px;
  font-family: Sans-Serif;
}

h1 {
  margin: 10px;
}

.balls {
  line-height: 15px;
}

.ball {
  display: inline-block;
  float: left;
  width: 15px;
  height: 15px;
  background: coral;
  border-radius: 20px;
  margin: 1px;
}

JavaScript

const dots = Ola(Array(999).fill(0), 600);

const html = '<div class="ball"></div>';
document.querySelector('.balls').innerHTML = Object.values(dots).map(d => html).join('');
const balls = document.querySelectorAll('.ball');

// Update the frame as fast as the CPU allows
(function tick() {
	Object.values(dots).forEach((value, i) => {
    balls[i].style.transform = `scale(${value})`;
    balls[i].style.opacity = value;
  });
  requestAnimationFrame(tick);
})();

// Set the size to update every 600ms
setInterval(() => Object.keys(dots).forEach(i => {
  dots[i] = Math.random();
}), 600);