How to Create Horizontal Background Text on Scroll
Tags: css, tutorial, javascript, animation
Published: 2022-01-31 20:14:34

I was struggling to find a way to do this after seeing it in [Pierre's portfolio](http://pierregrosjean.fr/) page. I really enjoyed the look of it, and wanted to try recreate it.


![horizontal text on scroll](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg7nlt3etbr2t1mmeoqr.gif)


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

```html
<body>
<header>
<h1>
This can be any text you want, can be interesting, 
fun, exciting, or just something about yourself
</h1>
</header>
</body>
```
2. Add a div beneath it, this will be your scrolling text and call it something useful like `scroll-text`.

```html
<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

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

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

2. 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.

```css
header {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  padding: 0 14rem;
}
```
3. For the text, I wanted it to be quite fluid. I used this site called [Utopia](https://utopia.fyi/type/calculator/) to get a fluid type scale.

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

4. 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.

```css
.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

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.

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

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

![horizontal text on scroll](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg7nlt3etbr2t1mmeoqr.gif)

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](https://codepen.io/marcojhb/pen/podvVxZ)