How to prevent text outside of the screen viewport from creating horizontal scroll space

  • 18 October 2021
  • 0 replies

Badge +1

Hello there!

I am trying to create a little text effect on my new business website using Elementor Pro. Although I’ve been searching for tutorials and helping hands online regarding this, I am still not quite there yet.

The effect is made of two seperate lines of text, horizontally scrolling in the opposite direction on scrolling down and up on the site (text also with a slight tilt). I do have two problems though:

Problem 1,  when sliding outside of the viewport (horizontally), the text (of course) creates extra white space. The more it slides away, the more white space on the right side is created. This is one thing I want to prevent, and I haven’t found a solution or even a fitting description for that problem by now.

The second problem is solved by solving problem 1 (at least I think so), which is I want the text to seem endless while scrolling. That is currently prevented by the text breaking into another line when too big or too long and also by the white space created even if it doesn’t break. Keeping the text short or small enough so it doesn’t break is of course not a solution since it’s supposed to look endless (think police / crime scene tape or similar).

Over the time I found a Website where the exact way I want it to look is displayed and working beautifully. Link provided here:

You have to scroll down a little bit. I’m talking about the huge red “DESIGNER / DEVELOPER” etc. Text.

I would love to hear your thoughts regarding a solution within Elementor Pro, with extra CSS most likely of course.

Thanks in advance!
Patrick Bock

0 replies

Be the first to reply!