Create Smooth Javascript Mouse Scroll Controlled dynamic element positioning

Project Description:
Need to start ASAP.

This is an existing portfolio website landing page.

The landing page currently displays a Featured Work Section/Frame, Work Listing/Frame, Services/Frame, Blog Listing/Frame and a footer.

Each frame will be 100% width and 100% height of the viewport. Content inside of these frames is irrelevant but needs to be able to be styled relative to the frame with bootstrap. The landing page will have all frames stacked vertically on a long tall scrollable page. Then on pageload, if the screen size is optimal, we want to create a tall empty element (to keep the scroll bar the exact same size) and turn all of the frames to a hidden fixed position and scroll them in one by one based on the current scroll bar position. When each frame hits the top it needs to snap in place and stay. If scrolling continues, the new frame comes in over the top of the under frame with the under frame moving. Creating a page over page effect.

We want to be able to resize the browser and at adapt to 3 different optimal viewport sizes. If its smaller then 1st size it will fallback to 1 long page scrolling normally.

We would like to use css3 as much as possible for animation but if that wont work we are ok without it.

Additional Project Description:
02/27/2013 at 12:30 EST
I added a more descriptive image of the process.

Also here is a list of possible methods that would need tobe created to achieve this. These methods are only for reference and can be changed to whatever makes it work for you. Plus I didn't go into complete detail so there may be extra methods that need to be created.

Methods
init
setOnResize
setBrowserDimensions
setFrameSizeBasedOnViewport

setOnScroll
removeOnScroll

checkBrowserDimensions

setFrameSizeBasedOnViewport
IF less 768x480 go back to normal stacking mode
changeToNormalModeWithAnimation
ELSE IF more then set frame mode
setNewFrameSize (this will determine where the scrollbar should be.)
changeToFrameModeWithAnimation

changeToNormalModeWithAnimation
smooth animation when changing modes not to confuse the user

changeToFrameModeWithAnimation
Create Blank Element matching height and width of all Frames added together.
// set css for frames that are off screen, top 100% , position fixed
// set current frame scrolling based on position of scrollbar
// if at top snap first frame
setFrameScrolling

setFrameScrolling
removeFrameScrolling

onScroll javascript event
setFrameSnapped
removeFrameSnapped



02/27/2013 at 12:35 EST
Maybe using this plugin

http://johnpolacek.github.com/superscrollorama/