Wreck it Ralph 2 Virus Popup

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.

<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);

Blog

Wreck it Ralph 2 Virus Popup

ann lin

I just watched Ralph Breaks the Internet 😍

Ralph in CSS

Simple Popup Animation

Join Our Newsletter. No Spam, Only the good stuff.

Related