Scroll into view

by Génesis García Morilla

CSS

div {
  display: inline-flex;
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 3px 4px;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.selected {
    animation: blink normal 1s infinite ease-in-out;
}

JavaScript

const min = 1;
const max = 1000;
const random = parseInt(Math.random() * (max - min) + min);
let $body = document.querySelector('body');

// Create max boxes
document.querySelector('body').innerHTML = '<div></div>'.repeat(max);

// Random background color for each box
[...document.querySelectorAll('div')]
.forEach(b => b.style.backgroundColor = `#${(Math.random()*0xFFFFFF<<0).toString(16)}`);

// Scroll into a random box
document.querySelector(`div:nth-child(${random})`).scrollIntoView(false);
document.querySelector(`div:nth-child(${random})`).classList.add('selected');