wreck-it-ralph

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.

WRECK-IT-RALPH DEMO

Simple Popup Animation

Hide the original Ralph so the first Ralph is always at random position.

1
<div id="ralph"></div>

Duplicate Ralph using cloneNode and put it in body.

1
2
3
4
5
6
7
8
9
10
11
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.

1
2
3
4
5
6
7
8
9
// 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

1
2
3
4
// Duplicate Ralph every second yo
setInterval(function() {
duplicateRalphAtRandomPosition();
}, 1000);

P/S: Do not click on the ads.
P/P/S: Am I lazy if I post same content here and at dev.to