top of page

Background scroll effects.

Learn how to use background scroll effects on site sections to create engaging, dynamic behaviors that display as visitors scroll up and down.

Learn how to use background scroll effects on site sections to create engaging, dynamic behaviors that display as visitors scroll up and down.

Let’s explore how to add background scroll effects to sections on Editor X.


You can use background scroll effects on site sections to create engaging, dynamic behaviors that display as visitors scroll up and down. Depending on the type of background you’re working with, you can set up different effects. There are tons of ways you can play around with them. Let’s explore how to apply these to your sites through some examples.



We’ll work on this site where we’ve already set up a few sections and backgrounds. In preview mode, you’ll notice the backgrounds are static by default. Let’s hit Edit to start adding some effects.


This top section has a gradient background. We set that up using the design tab over here. To start adding a background scroll effect, we’ll select the section and click this icon.


This panel will then open up where we can choose an effect type. If you hover over the icons you can get a feel for what these effects look like.


We’ll choose fade out for this example. Note that this effect will apply to all breakpoints. Next, we’ll hit Preview to see the scroll behavior in action. Looks great—you can see the background color fades out as we scroll.


Moving on, here we’ll show you how to add an effect to a section background with an image. The first step is to set an image as the section’s background through the design tab in the Inspector panel, like this.


As we mentioned, you can apply different effects, depending on the type of background your section has. You’ll only see these particular options once you’ve added a media background, like the image or a video.


We’ll choose the reveal effect.


Let’s preview now and scroll to the end of the second section to see how both effects have affected the site behavior. Cool, that all looks good.


For this area we’ve set up 3 sections, each with arrows pointing right or left. The arrows are images, set as the section background. We want each row of arrows to move in the opposite direction to the one above or below. To make that happen, we’ll choose the pan right effect for the first row, pan left for the second and pan right for the last.


In this last section, we’ve set a video background. Let’s add a zoom in scroll effect to this one.


Now let’s go back to Preview to see how all the effects are looking, including those last 2 we set up. 


Great, the arrows are moving and the video is zooming in, so we’re all set. Those are just 4 examples of what you can do with background scroll effects. Try it out for yourself to explore the different site experiences you can create.


Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶
bottom of page