DEV Community

ann lin
ann lin

Posted on

Wreck it Ralph 2 Virus Popup

#javascript #animation #css

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

Top comments (0)