John Cox

Blogs · @wyome

Tagged scroll · everything

How to Create an Awesome Scrolling Navigation using jQuery - thebeebs - Site Home - MSDN Blogs

This tutorial explains how to recreate Flipboard's distinctive parallax scrolling navigation effect, where the logo and background elements move at different speeds than the main content to create depth and visual interest. The implementation uses jQuery to dynamically size content items to fill the browser window, position them horizontally off-screen, and animate them into view while separately animating the logo and background triangle at different rates to produce the parallax effect. The guide walks through each JavaScript function needed to handle responsive resizing, content scrolling via navigation links, and boundary checking to prevent scrolling past the available items.

Permalink