Scroll to change text

Ask the community
1

Hello! I’m just starting with Editor X and I’ve tried several things to make this effect but none were working fine.

I’m wondering if there is any chance to achieve this effect:

The text is changing when scrolling down and the background is fixed.

Landing page

2802×1520 334 KB

Scrolling down, the menu is now showing at the same position as the title before

2800×1518 340 KB

Scrolling down again to see this menu (about / contact)

2804×1526 336 KB

Same thing when scrolling up.

Thank you for any help you can offer :slight_smile:

2

Hey @margaux-fa
I’m Ester, from the Editor X team :blush:
You can achieve this design using the sticky position.
Here I’ve created a quick example:

To achieve this design, follow these steps:

  1. Change the section’s height to 300vh so it’s longer than the screen height.
  2. Adjust the grid by setting it to 3 rows and 1 column. Than change each row’s height to 1fr (which means each will take 1/3 out of the available space).
  3. Drag the image to the first row and hit the stretch icon at the top right corner.
  4. Choose the image and change the position type to “sticky”

979×666 317 KB

  1. Place your title (above the image) in the first row.

1478×665 163 KB

  1. Place the menu on the second row. It doesn’t have any background right now and that’s ok. Since we set the image to sticky, it will “stick” to the section until you’ll reach the end of it.
  2. Place another menu on the third row. Same as 5.
  3. Preview the result.

I hope that helps!
Good luck.

3

Thank you so much! It works great!

Is there any way to add a “snap” when scrolling to the next text?

4

Sure.
To add the scroll snap you can build the section with a layouter or a repeater set to the slider display type. Both have the scroll snap option. Since you have the same layout for each fold, a repeater would be more efficient.

  1. Add a section, set the height to 100vh if you want to cover the entire screen.
  2. Drag an image and stretch it.
  3. Drag a repeater and stretch it.
  4. Change the display type to slider and the direction to top to bottom. Set the scroll snap to align to centre (or one of the other options the suit your design).

1948×1342 140 KB

  1. Click on one of the items and set the height to 100vh. All the others will change as well since that’s a repeater.
  2. Change the background color to opacity 0% (so you could see the image behind.

2418×1148 302 KB

  1. Drag a text element to one item, it would be duplicated to all the others.
  2. Change the text in each item.
  3. That’s it :slight_smile:
5

That’s exactly what I was looking for! Thanks a lot for your help :slight_smile: