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 block0
3: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/...
Clone the project → https://webflow.com/website/Cloneable...
Get started with Webflow: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community
We've developed websites and created custom solutions for over 7 years. Get in touch to learn how we can help you reach your goals.
We get to work with some of the most innovative companies in business. Feel free to email us to receive a proposal based for your custom solution.
We love sharing our knowledge because we come from a background of teaching designers how to use Webflow while on the Webflow Education team. Feel free to email us questions, as we'd be happy to help.