I just watched Ralph Breaks the Internet 😍
and I absolutely love the scene where Ralph is popping everywhere on the screen.
Ralph in CSS
Because it's late and we need Ralph in CSS so I stole the amazing CSS pixel art by Jason Delia using box-shadow. We need to play with box-shadow again.
Simple Popup Animation
Hide the original Ralph so the first Ralph is always at random position.
<div id="ralph"></div>
Duplicate Ralph using cloneNode and put it in body.
const body = document.getElementsByTagName("body")[0];
const ralph = document.getElementById("ralph");
function duplicateRalphAtRandomPosition() {
const ralphClone = ralph.cloneNode(true);
ralphClone.style.display = "block";
ralphClone.style.top = getRandomPercentage();
ralphClone.style.left = getRandomPercentage();
ralphClone.style.transform = `scale(${getRandomSize()})`;
body.appendChild(ralphClone);
}
Place cloned Ralph in random position with random size.
// Return 0% to 100%
function getRandomPercentage() {
return Math.random() * 101 + "%";
}
// Return 0.3 - 1
function getRandomSize() {
return Math.random() * 0.8 + 0.3;
}
Keep doing it every second until the Internet breaks using setInterval
// Duplicate Ralph every second yo
setInterval(function() {
duplicateRalphAtRandomPosition();
}, 1000);
Top comments (0)