Background scroll effects

Explore the different options for adding scroll effects to section backgrounds on Editor X.

Applying an effect to a block color or gradient section background

Click on any section with a solid color or gradient background. Click the Background Scroll Effects icon and, under Choose Scroll Effect, select either Fade in or Fade out. You can preview either effect by hovering over their respective thumbnails.

A screenshot of Editor X showing the scroll effect options for a gradient section background.

Applying an effect to a media section background

When an image or video is set as a section’s background, you can choose from a wide range of effects. To apply one of these, click on the section, click the Background Scroll Effects icon and choose from the effects that appear.

Note: Any background scroll effect that is applied to a section will cascade down to smaller breakpoints.

A screenshot of Editor X showing the scroll effects available when a video is set as the section background.

Follow these steps in the editor

Open exercise template →

Add a new section. Click on the last section on the page and hit the plus at the bottom. Add a Blank section.
Set a background image. Click on the section you’ve just created. Next, click the Design tab in the Inspector panel. From there, click Add Image or Video and select or upload the image you want to set as the section background.
Apply a background scroll effect. With the section selected, click the Background Scroll Effects icon in the floating action bar. A range of options will appear. Select the Rotate option to apply it to the section background.
Preview the site. Hit Preview in the top right of the editor and scroll up and down the page to see the final result.

Transcript

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.