DEV Community

Cover image for How to Create Horizontal Background Text on Scroll
Marco Agas
Marco Agas

Posted on

4 1

How to Create Horizontal Background Text on Scroll

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.

horizontal text on scroll

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

Step 1: HTML

  1. 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>
Enter fullscreen mode Exit fullscreen mode
  1. 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>
Enter fullscreen mode Exit fullscreen mode

Step 2: CSS

  1. 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;
}
Enter fullscreen mode Exit fullscreen mode
  1. 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;
}
Enter fullscreen mode Exit fullscreen mode
  1. 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;
}
Enter fullscreen mode Exit fullscreen mode
  1. 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);
}
Enter fullscreen mode Exit fullscreen mode

Step 3: JavaScript

  1. This is the easy part. I added a querySelector for the .scroll-text class.
  2. I then created an on scroll event function that checks the position of the window.
  3. 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`;
}
Enter fullscreen mode Exit fullscreen mode

horizontal text on scroll

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

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up