Mobile App Showcase on MaterializeCSS

A responsive example with iPhone images that snap into place as you scroll each section.

This code nugget uses the new MaterializeCSS framework inspired by Material Design. You could use this as a mobile app landing page, app tour, or mobile screenshot showcase. For this example, we use AngularJS 1.3 to get user data and profile images from the RandomUser.me API, but you can replace this with your own static images and data as desired.

The interesting bit: Sections that snap into place upon scroll so that the user experiences smooth transitions between each section. This also prevents the sections from being partially or "half-way" scrolled. It is responsive in that the textual content is hidden on smaller screen widths so that only the iPhone image frame is visible.

The structure: The white iPhone is a transparent image background that is placed in an overlayed "placeholder" container. This .outer container is position:fixed over the sections that are repeated down the page. As you will notice, the iPhone is actually a background in the .ph-overlay div.

When you dive down into the full code you'll see that jQuery animate is used to smoothly scroll the appropriate section into place. We temporarily add the .wait class during this transition so that the $(window).scroll event (constantly fired as the user scrolls) ignores any in-progress section transition. For this reason, the $('.highlight:not(".wait")') selector is used when determining the current section.