Demo: https://lucamug.github.io/mobile-parallax-scrolling/mobile-parallax-scrolling.html
I had fun building a simple script to handle a page with a mobile phone on the right half that has screenshots that change depending on the position in the page.
The page rely only on the waypoints plugin (http://imakewebthings.com/waypoints/) that send event based on the page scrolling.
These are the main steps of the script.
- Scan all elements with class “st-section” and for each of them it creates a “waypoint” that execute a call back every time the element come into view, with certain offset (“offsetTabletContentFlipping”)
- Add two extra waypoints, one at the top and one of the bottom, where the mobile frame will change from position: fixed to position: absolute. This is done adding and removing the class “sticky” to #st-tablet. This is to control the transitions between the mobile frame scroll together with the page and when it is fixed on the screen
- Create a throttled event in case of screen resize that recalculate some of the offsets
The elements that will scroll in the mobile frame need to be children of the element #t-tabletSections.
For more detailed explanation please have a look at the code that is quite simple.
The page is responsive and the mobile frame is hidden on mobiles.
Find the code at https://github.com/lucamug/mobile-parallax-scrolling
