Question

Here’s an example for the effect:

http://2012.beercamp.com/

I looked through the source and apparently there is some algorithm calculating the rotation. Is there any resource for such effects or can someone break down and explain the algorithm in laymen terms?

I tried playing around in jsfiddle.net jsfiddle but didn’t come close to it.

Answer 1

Smashing Magazine did a complete breakdown on that exact site.

edit, response to comment: adj isn’t a “side”, it’s a “length”. In order for a pop-up book to fold in on itself instead of just crumpling in a mess, the background of the contents have to be at some angle to the page they sit on. Fully horizontal and the book won’t work, fully vertical and there is nothing to see from the front of the book. Our author has chosen 15° from horizontal, but this choice was arbitrary.

Once he had picked 15° he needed to know the width of the book. This is what he calls adj. It is the size of the book created by using a fixed “scene width” and that arbitrary angle. He uses Pythygoras’ theorem to get it (because math is not his forté), but you could replace that line with the following if you want:

var adj = POPUP_WIDTH * Math.cos(degToRad(15));