Hey Drake, where you at!? How to make a spotlight/lightbox effect using HTML, CSS, and a little bit of JavaScript for those afraid of JavaScript

Last week I was tasked with creating a 5-10 minute presentation on anything I wanted at HackerYou. I had wanted to explore the beast that is JavaScript a little further (all I had done with JavaScript up to this point was simple things like add, removing, and toggling classes after a click). I remembered a plugin I had seen some weeks ago called Shine.js, which served as inspiration in that I now knew that it was possible to make things move relative to the position of your mouse.

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:

Image

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 was bringing in the JavaScript. If you’re anything like most entry-level developers (like myself), you lock up slightly at the mention of JavaScript, much less JQuery, and you probably aren’t even aware of JQuery UI (don’t worry, I didn’t either, it’s not that scary). Here is where things get a little more involved, but not terribly so, and by the end of it you’ll have something pretty cool that you can show off to your friends that seems a lot more complex than it is. Onward!

To do this, we’re going to need to access JQuery, which is a library built on top of JavaScript (essentially gives JavaScript a new skin, making writing JavaScript much easier for developers – all praise JQuery!). To do this, we need to load the JQuery Content Delivery Network (CDN), which Google has kindly hosted for us. Paste this snippet in the head of your document.

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.

Now that we have JQuery and the JQuery UI loaded on our page, we can get started. Head on over to the Draggable page and click “view source”. A window with all the code necessary will become revealed. Copy every thing from the beginning of the opening script tag (<script>) to the ending of the closing script tag (</script>). Paste this into the bottom of your document before your closing body HTML tag. This is important because JavaScript is what is called “blocking”, meaning that if you put it at the top of your document and it does not load, or takes a long time to load, the rest of your page will not load until JavaScript is done loading (or won’t load at all if for whatever reason your JavaScript fails to load – a reeeaaaaal pain in the everything).

One thing to note about this snippet is that you’ll have to change a few things about it. If you noticed, the script provided targets something with an id of draggable because the example on the page targets something with an id of draggable. So, accordingly, we must change our selector (or, at least I do because my “spotlight” div has a class of “spotlight”). At this point, here’s what my CSS and JavaScript looked like before I saved:

Image

After a quick save and opening up in the browser, I was elated to find that my crazy idea (which I’d previously thought was impossible, or overly ambitious) totally worked! Again, not that hard to implement, but looks pretty darn impressive, and made me a lot more comfortable working with JavaScript/JQuery. I’d definitely recommend this for anyone who wants to explore JavaScript but doesn’t know where to start, or for those who are acquainted with JavaScript, but are comfortable with things like adding, removing, and toggling classes. I did end up implementing Droppable and writing a little extra script to show a success message once you found Waldo, the code for which (in case you didn’t catch it the first time) is available at 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s