Can you provide a tutorial or a cloneable site in Webflow that shows how to achieve the effect where the screens scroll and change while the text box remains static and the content changes?

Published on
September 22, 2023

Yes, I can provide a tutorial on how to achieve the effect where the screens scroll and change while the text box remains static and the content changes. Here is a step-by-step guide:

  1. Create a new project in Webflow or open an existing one.
  2. Add a section to your page where you want the static text box to be located. You can use the "Section" element from the "Layout" panel.
  3. Inside the section, add a text element and enter your static text.
  4. Style the section and text box as desired using the Webflow Designer.
  5. Next, you'll need to create the scrollable screens. Add another section to your page below the static text box section.
  6. Inside this new section, add a div block element. This div block will serve as the container for your scrollable screens.
  7. Set the overflow property of the div block to "scroll" in the styles panel. This will make the content inside the div block scrollable.
  8. Inside the div block, add as many elements as you want for your screens. These can be images, text, or any other content you want to display.
  9. Style the screens as desired using the Webflow Designer.
  10. To achieve the effect where the screens change as you scroll, you'll need to use interactions. Select the div block element and go to the "Interactions" panel.
  11. Create a new interaction for the div block and set the trigger to "While scrolling in view". This will activate the interaction whenever the div block is visible on the screen.
  12. In the interaction, add a new step and choose the "Display" action. Set the display property to "none" for all the screens except the first one.
  13. Add another new step and choose the "Display" action. Set the display property to "block" for the next screen you want to show.
  14. Repeat steps 12 and 13 for each screen, adjusting the display properties accordingly.
  15. Preview your project to see the effect in action. As the user scrolls, the screens should change while the static text box remains fixed.

Cloneable example: Unfortunately, I cannot provide specific cloneable sites in this text-based format. However, you can find examples and resources on the Webflow Showcase or the Webflow Community forums. Simply search for "scrolling screens with static text box" and you should be able to find cloneable projects or tutorials that demonstrate this effect.

To achieve the effect where the screens scroll and change while the text box remains static and the content changes in Webflow, you can follow these steps:

  1. Create a section for the static text box.
  2. Add a div block inside the section and set it to position: fixed.
  3. Add a class to the div block and style it as desired.
  4. Create another section for the scrolling screens.
  5. Add a div block inside the section and set it to overflow: scroll.
  6. Add a class to the div block and style it as desired.
  7. Inside the div block, add content for each screen you want to display.
  8. Use interactions to create the scrolling effect.
  9. Set a "While scrolling in view" trigger for the div block.
  10. Add a "Display" action to show or hide the screens as desired.
  11. Preview and test the effect.
  12. Adjust the styling and interactions as necessary.

Additional questions:

  1. How can I create a fixed text box while scrolling in Webflow?
  2. What is the best way to create scrollable screens with changing content in Webflow?
  3. Are there any cloneable Webflow projects that demonstrate the effect of scrolling screens with a static text box?