Awesome loupe/magnifying effect on slideshow at Paydirt's homepage

Question

I'm totally blown away by the slideshow at https://paydirtapp.com/ , anyone got any clues on how it was achieved ? I'm guessing it's some complex html5 canvas mumbo-jumbo ?

Answer 1

TL;DR: Use your browser's inspector to find it all out!

There's probably not as much canvas use as you would expect. Using the browser inspector, you can quickly see the basics of what's going on here:

As you can see from above, there are three main components: the magnifier, the screenshots and the messages. Using CSS3, the drop shadow and circular effect are made (box-shadow & border-radius) for each of the parts of the magnifier (shadow, glow, and canvas).

The canvas part is simply the image that is under the magnifying glass. Using canvas gives the ability to blur the image (when the magnifying glass animates. The container of those three elements manages moving and sizing (scale). The circular cropping-like effect is done with just a border-radius style.

The image_wrapper class holds all the individual screenshots that the tour goes through. There are higher resolution images than are required probably because the canvas element won't have to load separate images for the "zoomed" in versions.

An then there's the magnifier_message class which simply contains the text. It's updated via javascript - nothing too fancy here.

To wrap it all up, the parent that contains these three elements has the background image (of the OSX desktop).

For the canvas work - it's not for the faint of heart - they're in javascript under /assets/promo-0e644...js file. Webkit's inspector can reformat the javascript so it's a bit more readable if you want to have a good read (It's the curly braces button on the bottom of the window):

Sadly, the sideshow doesn't degrade gracefully (or any sign of progressive enhancement) :(