I was struggling to think of a way to implement something to do with mouse movement, when I was told about the JQuery UI Draggable and Droppable, which somehow led me to thinking about searching. Then, like a lightning bolt it hit me – Where’s Waldo! For those not aware, Where’s Waldo (or Where’s Wally in the UK) is a children’s book game where you have to find the namesake character in huge image filled with many diversions and distractions.
My first attempts at creating the “spotlight”/”lightbox” effect were by and large huge failures. That, however, is not to say that they weren’t valuable exercises – I feel like you learn more from your failures than you might from your successes (don’t be afraid to try something new!). Nevertheless, it turned out that creating a circular div with the image of the Where’s Waldo page with a giant div of all black spanning the whole screen would (somehow) not create the effect I was looking for. I don’t know why I thought this would work, but it most definitely did not in any capacity. Back to the drawing board.
After playing around with a couple more options (including creating a giant black image with a circle cut out of it in photoshop – this probably would have worked, but I was convinced that this effect would be possible using CSS), I was brought back to my old friend background-attachment: fixed. Most people use this declaration on images when they want to give the effect of another div scrolling overtop of it on their web page (an example of such on my own website), however, it turned out to be exactly what I needed to remedy my situation. Remember: this property essentially makes the image stationary, regardless of whatever else is happening on the page. Here’s what my CSS looked like at this point:
Boom shakalaka. One important thing to note was that I put a 10px border of solid red just to see where the div was actually positioned on the page before I started tinkering with it’s position (which was absolute and then adjusted the top and left – don’t use margin here, you’ll move the whole div and the “spotlight” effect won’t be apparent)
Next, we’re going to need to access the JQuery UI, which allows us to another set of plugins built into JQuery. If you’re familiar with other programming languages, think of this like importing a module such as math or antigravity. This snippet for this is available once you’re viewing one of the plugins, I got it from looking in the head of Draggable, but can be a little tricky if you don’t know what you’re looking for, so here’s the snippet: <script src=“//code.jquery.com/ui/1.10.4/jquery-ui.js”></script> . Paste this snippet in the head of your document, and we’re ready to rock.
For the sake of brevity, I’m just going to cover using Draggable, but you can take using Droppable (which has Draggable already built into it) pretty far by setting a target (such as on top of Waldo) and have the script do something when you drop your spotlight on him – an example of which is up on my Codepen.
Not long after I finished the Where’s Waldo example, my good friend Vanessa Merritt showed me the infamous video of Drake lint rolling his pants. Since we live in Toronto, and pretty much anything involving Drake and the internet is nothing shy of hilarious, one thing led to another, and, well… Where’s Drake was born. My mom is very happy that I dropped out of school to make this.