CSS Scrolldown and Div enter Right

Question

I am looking to make a website which when you scroll down you have content moving in from the right, left, bottom and top and I know it is possible because I recently saw this car website which was basically a movie with content flying in from all directions but boasted to be a complete CSS website.

Link: http://graphicnovel-hybrid4.peugeot.com/start.html

The problem is I don't know where to start and any tutorials or advice would be great!

EDIT

Just to clarify, I want it so you visit the page and you see DIV1.

You scroll down and DIV2 comes in from the right and then takes up the screen.

You scroll down a bit more and then DIV3 comes in from the top and takes up the screen.

You scroll down a bit more and DIV4 comes in from the bottom part of the screen.

At the top a button for autoplay and then it does the whole lot.

I understand and am already fluent with the following CSS styles which can be used for this:

position: fixed; width:100%;

I am not fluent with the CSS animations and that is what I need help with.

Answer 1

Without looking into too much how they did this, it seems that most elements are sized and calculated by the screen dimensions and simply layered on top of each other.

To move the elements, you need to "scrolljack" the page (which I personally dislike on most sites) and then translate it across the x and y axis.

The best way, generally speaking is with CSS3 transforms. Transition.js is a great library for modifying the translations in JavaScript dynamically.

---

Warning: Scroll events can queue up on some browsers so if a user scrolled a lot really fast and you were running code on each "event" the page would lock up. See this article for an explanation of debouncing events.

Answer 2

You can use jquery and do .scroll and transition the div to the right.