Photicular

Avatar of Chris Coyier
Chris Coyier on

I was on vacation this past week and at some little beach gift shop they were selling this really cool big thick book called Ocean: A Photicular Book. You’ve probably seen something like it before… a plastic card that shows different images depending on how you are looking at it. This book is extremely well done in that the image are very high quality, and the design of the book makes the images move as you turn the pages.

Here’s a quick video:

Here’s an explanation by Dan Kainen:

Photicular, also known as Lenticular, or Integrated Photography, was first conceived in the early 20th century, but the basic concept has been around since 1692 when a French painter created paintings that revealed one, and then the other as the observer walked by. The simplest form of it is to cut two images into thin vertical strips and interleave them, placing in front of the composite image a plane of bars, like a picket fence, which only allows one to see one image at a time through the gaps. Instead of bars, lenses can be used, and more than two images – as many as dozens – can be interleaved.

The end result is really neat in the Ocean book. After mentioning this one on Twitter, I’ve heard good things about the Safari one as well. I’m sure they are all awesome. It’s almost like the newspapers and paintings in Harry Potter!

Of course, it made me think about how we might do something Photicular-like on the web. We have videos and GIFs on the web, so it’s not exactly hard to make images move. But it’s not just in the movement itself that made these books cool, it was that it moves along with your actions (of turning the page).

Perhaps we could page through a GIF as a user scrolled. Can you programmatically control which frame of GIF is currently being shown? Sorrrrrrta. There is no simple native technology for that, but there are some alternatives.

Dennis Gaebel wrote about a technique he saw on the Capser Mattress site last year.

Rather than a GIF, you can use an image sprite, and swap out which part of the image you are showing as you scroll. His final demo is here:

See the Pen How to Animate a Coffee Drinking Sprite With ScrollMagic by Envato Tuts+ (@tutsplus) on CodePen.

If you really wanted to stick with a GIF, BuzzFeed actually created a JavaScript library called libgif-js specifically for exerting control over GIFs in this way. Through this lib, you can jump to certain frames, pause and start the GIF like you can with video, and even make the GIFs “rubbable”, meaning dragging left-and-right on them scrub the GIF backward and forwards.

To get super meta, here’s a GIF of me playing with a “rubbable” GIF:

The squishing is just what the GIF is of, it’s the ability to scrub through the GIFs frames that is interesting here. Well, squishing Steve Buscemi’s head is interesting too, but you know what I mean.

Related

A decade ago, I remember my old boss Tim Chatman designing a paper flip book thing for a client of ours.

It’s not Photicular, but it uses the same kind of slotted paper tabs you pull to make the images change.

I’m also reminded of one of my own favorite childhood books, Dinnertime, where different animals pop out at you as you turn the pages.