Question

I need to make an effect similar to the Android effect when you slide between screens.
I have two divs which sit next to each other, each having 100% width. Basically, when I click a link, I want to move to the “next” screen.

The situation gets complicated because I want only the container of these two divs to act like this, meaning that the header and footer should stay fixed upon this process.

How can I do this? Thanks!

Below is my basic syntax

<header></header>
<div id="container">
    <div class="screen"></div>
    <div class="screen"></div>
</div>
<footer></footer>

Answer 1

There are a lot of plugins to do this, I personally like flowplayer’s scrollable plugin:

http://flowplayer.org/tools/demos/scrollable/wizard.html