Give your site a fresh look with a scrolling text marquee frame that stays in view. Build along and learn how to create it.
Start by dragging a container onto the page and aligning it to the top this will form the first part of our frame.
Next up, I'll set the width to 100% viewport width so it stretches all the way across the section.
Then, I ll add a text marquee element inside the container,
& update the text to fit our design,
And change the text color to white. I ll also adjust the font size to about 16 pixels for a perfect fit.
Next, let s change the separator shape beside the text from a heart to a circle, and set its color to white.
Oh, and another minor tweak set the spacing between the items to 18 for a slightly more refined look,
and reduce the size of the shape to align with the text size. Nice.
To get that full-width look, let's set the text marquee to 100% so it stretches across the whole container.
We ll also align it to the center, both vertically and horizontally.
and set the containers height to 26 pixels.
Looks good. To maintain the design consistency throughout the frame, let s duplicate the container and make a few tweaks.
The duplicated container is going to be on the left, so let's align it over there.
For this one, set the width to 26 pixels and let the height stretch all the way to cover the full viewport.
I'll make sure it s aligned to the top as well.
Now rotate the text to 270 degrees,
and then adjust the height to 100 vh to match the container, so it spans the full height of the viewport.
To finish off the left part of the frame, align this element to the top left corner.
Now, let's create the right side of the frame by duplicating this container and placing it on the right side of the section.
This time, I ll rotate the text to 90 degrees. Nice. the right side is done!
To create the bottom row of the frame, I ll simply duplicate the first container.
and align it to the bottom.
Awesome, the containers are all set. Now, let's add some motion by tweaking the movement settings. I'll have the text at the bottom scroll from right to left.
To make sure the containers stay put while scrolling, set each one to the 'Pinned' position and choose 'Pin to Page.' This way, they'll stay visible as you move through the whole page.
And there you have it a scrolling text marquee frame that stays on screen as you scroll down the page. How cool is that?
To learn more about what you can do with Wix Studio, check out the Wix Studio Academy.
