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:
check this book it's the coolest pic.twitter.com/isRLATp9im
— Chris Coyier (@chriscoyier) April 13, 2017
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:
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.
Nice one Chris, never thought I’d see this book on a css-tricks post!
My partner found it along with the Safari one and our three-year old son totally loves them both. The motion really is such a neat trick. I think there’s a Polar one also and maybe another one or two but I can’t be sure.
I’ve long been a fan of various art and motion techniques coming from a fine art background in the graphic design and then in to web development. These books are awesome. There are four last time i checked, worth the investment too. Polar, Safari, Jungle and ocean. I’d love to explore this idea also with web techniques using gigs and sprites or even other techniques if possible ;) there is also another method with strips mounted vertically on boards at angles in a frame, from one side you see one view and from another side you see another view, awesome to see in person!
My 2 year old loves the jungle one we bought her for Christmas. With tablets and all the amazing technoogy around it surprises me that something so low tech can still spark fascination in really young children. I remember a design in CSS Zen Garden many years ago that did something simillar using an image with a gradient if I remember right to turn on a deep sea diver’s torch as you scrolled down the page.
The other type of “movement” book is “scanimation”, scanimationbooks.com/the-books/gallop/ … I did do that for a website a few years ago, but I didn’t like the effect (too unstable) so I skipped it.
[begin “About Scanimation”: ]
The way “movement” works in these books is the following: Say you want to use five frames to make up the animation. Then you have a front “mask” (black usually) of vertical strips that are four small units wide followed each by a one-unit-wide void. Now take your target images, slice them in 1-unit-wide vertical strips, and keep every fifth of these strips… then make a combined image by taking a strip of each of the five images in turn. [Well… roughly; a bit of black space between adjacent frames to separate them?… buy one of these books and destroy it to see the actual workings, but that’s sad.]
Why does this work? Because if you put your mask on top of the combined image, neatly lined up, then only bits of one of the five images shows; move the mask left or right and another image’s bits are revealed. Because it’s a black mask with small white image parts revealed, your mind glues them together into shapes. The masking lines are vertical, because the image is attached to the book’s (vertical) spine and progressively turning the page further slides the image further and reveals the ‘next’ frames — eventually ‘looping’ back to the first frame (but moved five units leftward).
[end “About Scanimation”: ]
…
So, I did the same with only two images: For masking, a small GIF or PNG with horizontal 1px white stripes in position:relative and a medium z-index (above background but below text), and repeated x- and y-direction. Then as background image (with position:fixed and repeated both directions), I had on a white background interlaced the two words of a project name — on the ‘odd’ lines from the one (say “TRUTH”), on the ‘even’ from the other (say “JUSTICE”). Which means that while scrolling, it fuzzes around/swaps between both words too fast for your eyes to separate; but after scrolling it shows one or the other, depending on whether your scroll ended by chance on an even or uneven pixel (if you used two images). Using wider bands would slow down the effect, but I thought it would have limited use.
Another, slightly more satisfying variant I tried interlaced different colour variants of the same image: Blue and red… while scrolling, it seemed gray-ish, then when ended it was arbitrarily blue or red. I think it looks grey because it’s rather faint (which is OK for backgrounds) — half your normal image is thrown out in the interlacing, replaced (here) by white; and it’s those two that get superpositioned. The improvement is that it’s the colours jumping around, with the shapes staying the same.
I think the first variant might have a use if you have say a company logo (and/or slogan) consisting of two parts that each mean something, and a lo-fi styling: Say it’s “RELIABLY FAST” for secure deliveries with a logo consisting of a tickmark (for “reliable”) and a lightning bolt (for “fast”). All in all it has to be made faint enough not to be too distracting.
Hey, don’t shoot me… I evolved the design in another direction for a reason.
This Bat for Lashes article on Pitchfork is by far, still one of the best examples I’ve ever come across. Not only is it instantly striking, it enhances the interview in a luxurious way that print cannot do. It’s a great way of making a long post on the web more readable, and more engaging.
http://pitchfork.com/features/cover-story/reader/bat-for-lashes/
The Dutch Airport of Schipol has the worlds largest lenticular image, and it’s an entire wall. It’s incredible, and I’m hoping to see it this month. I’ve been a fan of lenticular images for years now, they’re fascinating.
The Lenticular Wall in action (youtube)