Before/After Image Viewer

The New York Times website has an incredible series of satellite photos showing the effects of the Japanese earthquake and tsunami. They use a slider effect to allow you to instantly compare "before and after" images of the same scene, and it's a very effective technique.

I was curious about how they accomplished this. I assumed it was done in jQuery, and I was right. A quick search uncovered this tutorial and I couldn't wait to try it out.

I grabbed a photo from our recent visit to Hoover Dam and did some quick-and-dirty Photoshopping. I uploaded both versions, and then applied the script and CSS (which I modified slightly) from the tutorial. The result is shown below. Click on the vertical line in the photo and drag it to the left or right to uncover or cover the modified photo. You can also click anywhere on either side of the line to move it to that point. [Note: While this should work in most browsers, you must have Javascript enabled.]

I don't know whether I'll ever have a practical use for this technique in my work, but it's a cool effect.

About this Entry

This page contains a single entry by Eric published on March 16, 2011 1:12 PM.

Ballroom Dance featuring "The Cutouts" was the previous entry in this blog.

The Beatless is the next entry in this blog.

Archives Index