Whole Grains is a content delivery app demonstration built with web standards html, css, and javascript. The user is able to navigate section to section simply by scrolling, either with the mousewheel or the vertical window scrollbar. The sections of content animate in their composition as they enter the viewport. The logo animation on page load was created with Adobe Edge Animate.

I used the supercool jQuery plugin, Superscrollorama, to control the scroll animation. Think of it as a controller for animation, letting you animate elements on the page based on the scroll position of the browser window. You add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point. This technique is not new, but it has become a successful interest generating tool. The layout is designed to lead the viewer to systematically scroll down the page. By allowing designers to create transitions out of any numeric CSS property, Superscrollorama is one of the quickest ways to develop your own scrolling website.

Superscrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for downloads and documentation. More information about the Adobe Edge Animate program can be found here. And please, try to eat a healthy diet...

Click the "View Demo" button to experience it yourself...

Type: Content Delivery
Skills: Web Standards|Photoshop
Deliverables: html|css|javascript