small "independent" functions

by jonahe

HTML

<div id="app">
  <div id="mouse_follower" class="circle"></div>
  <div class="number circle">1</div>
  <div class="number circle">2</div>
  <div class="number circle">3</div>
  <div class="number circle">4</div>
  <div class="number circle">5</div>
  <div class="number circle">6</div>
  <div class="number circle">4</div>
  <div class="number circle">5</div>
  <div class="number circle">6</div>
  <div class="number circle">1</div>
  <div class="number circle">2</div>
  <div class="number circle">3</div>
  <div class="number circle">4</div>
  <div class="number circle">5</div>
  <div class="number circle">6</div>
  <div class="number circle">4</div>
  <div class="number circle">5</div>
  <div class="number circle">6</div>
</div>

CSS

html {
  overflow: hidden;
}

#app {
   background: teal;
   position: relative;
   height: 100%;
   min-height: 100vh;
   overflow: auto;
}

div {
  transition: background-color 1s 0s ease-in-out;
}

.circle {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: tomato;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  position: relative;
  top: 0;
  left: 0;
}

#mouse_follower {
  position: absolute;
}

JavaScript

const appEl = document.querySelector("#app");
const mouseFollowEl = document.querySelector("#mouse_follower");

const numberCircleElements = Array.from( document.querySelectorAll(".number.circle") );

function translateElment(el, x, y) {
	el.style.transform = `translate(${x - 20}px,${y - 20}px)`;
}

function getRandomColor() {
	// stolen from https://stackoverflow.com/questions/1484506/random-color-generator
  return '#'+Math.random().toString(16).substr(-6);
}

function changeToRandomColor(el) {
	el.style.backgroundColor = getRandomColor();
}

appEl.onmousemove = function(mouseMoveEvent) {
  const {clientX, clientY} = mouseMoveEvent;
  translateElment(mouseFollowEl, clientX, clientY);
}

setInterval(() => changeToRandomColor(mouseFollowEl), 1000);
setInterval(() => changeToRandomColor(appEl), 1500);

numberCircleElements.forEach((numberCircleEl, nceIndex) => {
	const intervalMs = 500 + nceIndex * 100;
	setInterval(() => changeToRandomColor(numberCircleEl), intervalMs);
  
  const startOffset = 40;
  const translateX = startOffset + nceIndex * 40;
  const translateY = startOffset;
  translateElment(numberCircleEl, translateX, translateY);
});