skrollr-parallax-demo

This is a simple skrollr parallax demo to help illustrate the concept outlined here used to remedy the seemingly arbitrary cutoff of page content in mobile, and particularly iOS devices.

This demo consists of:

A 'before' page

This page is simply a clone of the classic parallax example with some additional page content added within #skrollr-body to reproduce the seemingly arbitrary cutoff.

An 'after' page

This page is identical to the before page, but which simply adds this keyframe information - data-bottom="top: 0%;" data-top="top: 0%;" - to the last element (the #done element in this case) within #skrollr-body to identify the end of (#skrollr-body) relative page content for skrollr, particularly in mobile, thus helping skrollr properly calculate mobile page content height and in turn 'fixing' the seemingly arbitrary cutoff.

NOTE:

The keyframe markup effects the document length. For instance, changing the above keyframe markup to data-bottom-top="top: 0%;" data-top-bottom="top: 0%;" will add 100% viewport height to the total document height, in turn causing the actual page bottom to scroll up out of view.