How to Create Horizontal Background Text on Scroll

#css #tutorial #javascript #animation

I was struggling to find a way to do this after seeing it in Pierre's portfolio page. I really enjoyed the look of it, and wanted to try recreate it.

I'm still very early in my front-end skills, but thought I'd share it anyway.

Step 1: HTML

Create a simple HTML page and add your text content

<body>
<header>
<h1>
This can be any text you want, can be interesting, 
fun, exciting, or just something about yourself
</h1>
</header>
</body>

Add a div beneath it, this will be your scrolling text and call it something useful like scroll-text.

<body>
<header>
<h1>
This can be any text you want, can be interesting, 
fun, exciting, or just something about yourself
</h1>
</header>
<div class="scroll-text">
      <span class="bg-text">WELCOME</span>
</div>
</body>

Step 2: CSS

For the sake of this post, I just made the body very long, so that you can see the effect of the scrolling.

body {
  height: 5000px;
  background-color: #272727;
  font-family: "DM Sans", sans-serif;
}

Then I added in some elements to make the main text look better. I used min-height as to keep it in the center when full screen on desktop, but preventing it from going off screen on mobile.

header {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  padding: 0 14rem;
}

For the text, I wanted it to be quite fluid. I used this site called Utopia to get a fluid type scale.

header h1 {
  font-size: clamp(2.85rem, 2.18rem + 3.37vw, 4.58rem);
  color: #fff;
}

Last, I edited the scroll-text container and bg-text to make sure it was large and outlined. I used white-space: nowrap to prevent any wrapping of the text, and transition: all 0.5s to make sure it scrolled nicely. For bg-text, I added in extra functionality to make sure the fill-color matched the background.

.scroll-text {
  position: fixed;
  top: 0;
  left: -800px;
  white-space: nowrap;
  z-index: -1;
  transition: all 0.5s;
}

.bg-text {
  font-size: 40rem;
  color: rgb(122, 122, 122);
  -webkit-text-fill-color: #272727; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgb(70, 70, 70);
}

Step 3: JavaScript

This is the easy part. I added a querySelector for the .scroll-text class.
I then created an on scroll event function that checks the position of the window.
Then a simple style change in JS which changes the horizontal position by x pixels depending on your preference.

let scrollText = document.querySelector(".scroll-text");

window.onscroll = () => {
    let pos = window.scrollY;
    // console.log(pos);
    scrollText.style.left =  `-${pos/2}px`;
}

And there you have it. I might have made a few errors or poor practices, but I'm still new and learning as I go. Hope you learned something at least :)

CodePen Link