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.

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

Discussion (1)

Collapse
limbojohnes profile image
LimboJohnes

It’s a very cool cartoon, and its essence is really similar to the virus that breaks the computer, so you need to check it for viruses, as this problem is mainly solved by checking and cleaning the computer software, and to find out what suits you, it’s best to look at the blog about antivirus programs thinkmobiles.com/blog/best-free-an..., here you will find out everything you need and be satisfied.