Elementor Split Scroll Design

Elementor Split Scroll Design

Check out our CSS Course, made especially for Elementor users.

Table of Contents

In this tutorial, I will show you how to replicate this "split scroll" design, where sticky images on one side, are "reverse scrolling" as content on the other side is scrolling normally.

See the demo here:

Features:

  • Works with sections & columns, or containers
  • Works with any amount of images
  • Works with the normal "Image element", so it's lazy-load compatible
  • Works on desktop and tablet (could work on mobile too, however it's not ideal due to the narrow viewport)
  • Performant animation
  • No JS dependencies

Let's get started!

First, import the template on the page where you want this

It's easier to start from the template for this tutorial.

Choose the template that you want, you have the choice between the "Container" version, or the "Section" version.

This is a premium tutorial. Purchase access to unlock the full tutorial and download the template.

 

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

2 Responses

    1. This is CSS, you can add it anywhere that will be specific to this page, such as page settings > Advanced > Custom CSS

Leave a Reply