Create Smooth Javascript Mouse Scroll Controlled dynamic element positioning

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.