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-textcontainer andbg-textto make sure it was large and outlined. I usedwhite-space: nowrapto prevent any wrapping of the text, andtransition: all 0.5sto make sure it scrolled nicely. Forbg-text, I added in extra functionality to make sure thefill-colormatched 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 :)
Top comments (0)