DEV Community

ann lin
ann lin

Posted on

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.


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); = "block"; = getRandomPercentage(); = getRandomPercentage(); = `scale(${getRandomSize()})`;

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() {
}, 1000);

Top comments (0)