As previously seen on Apple’s iPad page, horizontal scrolling fully engages visitors by using a unique interaction that changes their scrolling experience from vertical to right to left. Scrolling can also be achieved using the up and down arrow keys (spacebar for just scrolling down).
But, here’s the secret — it’s not horizontal scrolling. It’s vertical scrolling with an interaction that moves elements in our viewport as we scroll through our project. There are five parts to a horizontal scroll effect: the track (this holds everything and serves as the trigger for the horizontal movement interaction), the camera (which is positioned sticky to the viewport as the content scroll through), the frame (which holds all of our content and aligns them horizontally), the content, and the interaction.
In this lesson, we’ll teach you how to make a horizontal scrolling interaction with these steps:
00:00 — Introduction
00:52 — Create the “Track” Section
01:33 — Set up the “Camera” Div block
02:40 — Structure the “Frame” Div block
03:25 — Add items
05:05 — Configure the interaction
07:50 — Configure the interaction on tablet and mobile devices for accessibility
09:24 — Recap
Read about it → http://university.webflow.com/lesson/…
Get started with Webflow: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community
