Discover the best horizontal-parallax websites created by professional designers. Get inspired and start planning your perfect horizontal-parallax web design today!

One of my frustrations with Webflow transitions is that achieving a good horizontal scroll effect with things like parallax is not possible out of the box. The "while scrolling in view" trigger only works for vertical scroll. So, after some trial and errors, I came up with a setup that gets the job done!

Hokaido is a free template focused on images and horizontal scroll. It's main features are:

1. Works well with CMS - no need to manually tweak any transitions, the horizontal scroll works with any number of CMS elements.

2. Parallax effects - create cool horizontal parallax effects, with the current setup, it just works!

3. Cool page transitions - go from page to page with a smooth transition between different projects.

Want to know how the trick is done? Clone it, change it, make it your own!

Hokaido

Hokaido - Free Horizontal Scrolling Template

This template uses CSS Sticky and IX2 to showcase a Horizontal Scroll effect on a wide content section.

✓ Horizontal scrolling Sticky Section with Fixed Title

Sticky + Horizontal Scroll Demo

More an experiment than an example to follow... a vertical parallax using only webflow and custom CSS code. It's a bit hard to fine tune and maintaink lot's of tweaking, but it mainly works.

CSS Vertical Parallax

CSS only Parallax with Webflow

This project features an horizontal timeline of events. You can navigate it by scrolling vertically: the horizontal timeline view and the vertical list stay in sync. The vertical list shows extra events, notes and links.

The timeline is CMS based: there are two collections, one for the events, and one for the categories of events. Each year of the timeline is made out of one Collection List.

This demo uses real data from Webflow's updates: new features, announcements, events...

There's more info about how it was built and how it works with CMS and CSS Calc at the bottom of the page. The technique for the horizontal scrolling sticky section can be found in the "Sticky + Horizontal Scroll Demo" project on my profile.

You can clone this project, delete the data in the Events and in the Categories Collections, and make this site your own.

CMS Timeline Template

This is an example of a horizontal layout using IX2 with an Active Menu

Horizontal Scroll Layout

Horizontal Scroll Layout Example with Active Menu

A personal project I did for fun based on my wife's Instagram account. Had some fun with parallax effects, horizontal scrolling effect, and some more cool interactions. Have fun!

Familinha Buscapata (The Pawtastic Family)

The Pawtastic Family (Familinha Buscapata)

A horizontal Scroll that snaps in. The Horizontal Scroll is copied from the Webflow team.

horizontal scroll

Horizontal Scroll with Snapping

Efecto Parallax en Webflow | Parallax effect webflow

- Efecto parallax horizontal
- Efecto parallax vertical

Efecto Parallax

efecto-parallax

Hey everyone, I would like to share my personal portfolio site with you!
Here I involved horizontal scrolling effect, parallax scrolling and some custom styling of scroll bars, going through pages with fade in/out...

*This is old site and I believe there much more I can put there, please write your suggestions!

alexdesign

Personal Portfolio Site | Aleksa

My first real project as webflow designer. Some parallax and horizontal scrolling to make it fresh. Need to improve but i still proud, hope you guys will like it ! ;)

Daniel Lauri

Daniel Lauri Exhibition

This is a simple example of a dynamic table in Webflow.

Table Examples

Simple Table using CMS

Escape to Amity Island and see how I set up a horizontal scrolling effect to highlight the 1975 movie Jaws!

Check out the tutorial video here: https://youtu.be/OCVRIb1oiVE

Horizontal Scroll | Jaws

Animal Scroller

Animals Scrolling

Interesting take on a personal portfolio with some animations and interactions including parallax and horizontal scrolls with an extremely cool menu and work page.

Let me know if you have any questions!

Aawkward Aardvark

Aawkward Aardvark Portfolio

Full Screen Hero

Full Screen Hero Example

This is a quick example how to create a full screen slider, with images that are 926x540px and centered horizontally and vertically with a Slide Title

Discover horizontal parallax websites built by the Webflow community

Discover horizontal parallax websites built by the Webflow community