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.

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

Step 1: HTM…


This content originally appeared on DEV Community and was authored by Marco Agas

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

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;
}
  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;
}
  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;
}
  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);
}

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`;
}

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


This content originally appeared on DEV Community and was authored by Marco Agas


Print Share Comment Cite Upload Translate Updates
APA

Marco Agas | Sciencx (2022-01-31T20:14:34+00:00) How to Create Horizontal Background Text on Scroll. Retrieved from https://www.scien.cx/2022/01/31/how-to-create-horizontal-background-text-on-scroll/

MLA
" » How to Create Horizontal Background Text on Scroll." Marco Agas | Sciencx - Monday January 31, 2022, https://www.scien.cx/2022/01/31/how-to-create-horizontal-background-text-on-scroll/
HARVARD
Marco Agas | Sciencx Monday January 31, 2022 » How to Create Horizontal Background Text on Scroll., viewed ,<https://www.scien.cx/2022/01/31/how-to-create-horizontal-background-text-on-scroll/>
VANCOUVER
Marco Agas | Sciencx - » How to Create Horizontal Background Text on Scroll. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/31/how-to-create-horizontal-background-text-on-scroll/
CHICAGO
" » How to Create Horizontal Background Text on Scroll." Marco Agas | Sciencx - Accessed . https://www.scien.cx/2022/01/31/how-to-create-horizontal-background-text-on-scroll/
IEEE
" » How to Create Horizontal Background Text on Scroll." Marco Agas | Sciencx [Online]. Available: https://www.scien.cx/2022/01/31/how-to-create-horizontal-background-text-on-scroll/. [Accessed: ]
rf:citation
» How to Create Horizontal Background Text on Scroll | Marco Agas | Sciencx | https://www.scien.cx/2022/01/31/how-to-create-horizontal-background-text-on-scroll/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts