Vertical Marquee Text Interaction

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

In this lesson we'll explore a cool vertical marquee text effect as seen on the website of PeakSpan Capital. We'll look at how a beginner might go about building this at first go and then have a look to see if we can make some improvements. By utilizing EM and % units, we'll find that we can make the design more responsive across breakpoints and flexible to design changes. We'll also explore an accessibility concern with multiple h1 elements on the page.

‍

Watch the Tutorial on YouTube Get the Project Cloneable

Vertical Marquee Text Interaction

Inside <head> tag

Inside </body> tag