How was this Skrollr 3D rotation effect achieved?

Question

I'm a fairly new and still learning developer and today I came across website that got my interest. http://www.lobagola.com/ I checked the source codes and reviewed what scripts the developer used and discovered Skrollr.

What kind of images did he use? Are they just plain static images or some sort of 3D image I'm not familiar with, how do I achieve this effect using Skrollr? I have read the documentation and I don't believe I came across an example as such.

Answer 1

When in the same situation I typically open the Developer Tools of my Internet Exploer with F12 (yeah, yeah... other browsers got similar tools to do this, you might have to look a bit) and go to the Network tab, which allows you to track all network activity caused by the current web page.

Once enabled (green "play" icon), I hit Ctrl + F5 to force-reload the whole page.

After that I just go through all the files loaded to see whether I can find whatever I'm looking for. You don't have to read code or intepret anything. In this example I've been looking for a movie file or anything similar.

Obviously to not require HTML5, this page uses a "sprite sheet" with the different frames of these animated transitions .

There are also single images, obviously used as placeholders and as a fallback.

When scrolling through the slideshow, the page will calculate an index between 0 and the number of frames in the image file and display that (cut using CSS formatting).