Animate text base on the page scroll

One effective way to achieve this is through dynamic visual effects, such as scrolling text animations. In this article, we will walk through a straightforward implementation that combines HTML, CSS, and JavaScript to create an engaging text animation that responds to user scrolling.

Overview of the Code

    <div class="text-box">
        <strong>Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, </strong>
    </div>

Add a <div> with a class of text-box. Inside this div, a <strong> tag contains repetitive text, which we will animate. The goal is to make this text scroll horizontally as the user scrolls down the webpage.

CSS Styling:

    .text-box {
        overflow: hidden;
        white-space: nowrap; /* Prevent text from wrapping */
        position: relative;
        width: 100%;
    }
    .text-box strong {
        display: block;
        font-size: 30px;
        transition: transform 0.2s ease-out;
    }

The CSS section is crucial for establishing the look and feel of the text box. The .text-box class prevents text wrapping and ensures a clean presentation by using overflow: hidden; and white-space: nowrap;. This makes the text appear as a single line that will move horizontally across the screen.

The strong element is styled with a larger font size and a transition effect that enables smooth movement. The transition property on the transform property ensures that the text movement appears fluid, enhancing the user experience.

JavaScript Functionality

   const scrollText = document.querySelector('.text-box strong');
        window.addEventListener('scroll', () => {
            const scrollY = window.scrollY;
            scrollText.style.transform = `translateX(-${scrollY * 0.3}px)`; // Adjust horizontal scroll speed
    });

The heart of the animation lies in the JavaScript section. Here, we use an event listener to monitor the scroll event on the window. Each time the user scrolls, we calculate the vertical scroll position (scrollY) and apply a translation to the text using the transform property. The translation factor of -0.3 allows for customization of the scroll speed, making it possible to adjust how quickly the text moves in relation to the scroll.

Moreover, the code is highly adaptable. Developers can easily modify the text, adjust the scrolling speed, or change the styling to match the overall theme of their website. This versatility makes it a valuable addition to any web design toolkit.

Demo:

Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better, Found Some Thing Better,

Conclusion

In conclusion, this simple yet effective scroll-driven text animation is a great way to enhance user experience on your website. By combining CSS for styling and JavaScript for functionality, you can create an engaging effect that draws users’ attention and encourages interaction. Implement this technique to elevate your web design and keep your audience captivated!