Responsive Font Size Adjustment Based on Scroll Position Using JavaScript

Discover how to create a dynamic font resizing effect that adjusts based on the user's scroll position for a more interactive web experience.

Introduction

In web design, creating engaging and interactive user experiences is crucial for keeping visitors on your site. One effective technique is adjusting font sizes based on scroll position. This not only enhances visual appeal but also improves readability and user interaction. In this article, we will explore how to implement a responsive font size adjustment using JavaScript. This feature will be applied to specific headings depending on the screen width, making your site more adaptive to different devices.

By following this tutorial, you will learn how to make headings dynamically resize as users scroll through your page. This effect can add a modern touch to landing pages and enhance the overall user experience by making text elements more engaging and visually appealing.

Setting Up the HTML Structure

To start, we need to set up the HTML structure for our headings. We’ll create a section specifically for larger screens (wider than 768px) and another for smaller screens (767px and below). This ensures that the font resizing effect is applied correctly based on the screen size.

            <section id="scroll-heading">
              <h2>Scroll Heading for Large Screens</h2>
            </section>
            <section class="scroll-heading-m">
              <h2>Scroll Heading 1 for Small Screens</h2>
            </section>
            <section class="scroll-heading-m">
              <h2>Scroll Heading 2 for Small Screens</h2>
            </section>
            <section class="scroll-heading-m">
              <h2>Scroll Heading 3 for Small Screens</h2>
            </section>
        

The HTML structure above includes a section with the `id` of `scroll-heading` for larger screens, containing a single `

` element. Additionally, three sections with the class `scroll-heading-m` are created for smaller screens, each containing its own `

` element. This layout allows us to apply different styles and effects depending on the screen size.

Implementing the JavaScript

Next, we need to add JavaScript to handle the font resizing. The script will listen for scroll events and adjust the font size of the targeted headings based on their position relative to the center of the viewport. The resizing effect will differ based on the screen width, applying to specific headings accordingly.

            document.addEventListener('DOMContentLoaded', function() {
              document.addEventListener('scroll', function() {
                const viewWidth = window.innerWidth;
            
                if (viewWidth > 768) {
                  const heading = document.querySelector('#scroll-heading h2');
                  if (!heading) return;
            
                  const rect = heading.getBoundingClientRect();
                  const windowHeight = window.innerHeight;
            
                  const headingCenterY = rect.top + rect.height / 2;
                  const scrollPercent = (headingCenterY - windowHeight / 2) / (windowHeight / 2);
            
                  const minFontSize = 25;
                  const maxFontSize = 50;
                  const fontSize = scrollPercent < 0 
                    ? Math.max(minFontSize, maxFontSize - (-scrollPercent * (maxFontSize - minFontSize)))
                    : maxFontSize;
            
                  heading.style.fontSize = fontSize + 'px';
                } else {
                  const headings = document.querySelectorAll('.scroll-heading-m h2');
                  headings.forEach(function(heading) {
                    const rect = heading.getBoundingClientRect();
                    const windowHeight = window.innerHeight;
                    const headingCenterY = rect.top + rect.height / 2;
                    const scrollPercent = (headingCenterY - windowHeight / 2) / (windowHeight / 2);
                    const minFontSize = 25;
                    const maxFontSize = 50;
                    const fontSize = scrollPercent < 0 
                      ? Math.max(minFontSize, maxFontSize - (-scrollPercent * (maxFontSize - minFontSize)))
                      : maxFontSize;
                    heading.style.fontSize = fontSize + 'px';
                  });
                }
              });
            });
        

This JavaScript code adjusts the font size of headings based on scroll position. For screens wider than 768px, it targets the `#scroll-heading h2` element, while for screens 767px wide or less, it applies the effect to all `.scroll-heading-m h2` elements. The font size decreases as the heading moves above the center of the viewport, and increases when it moves below.

Understanding the Code

The JavaScript code provided sets up an event listener for scroll events. It calculates the scroll percentage based on the position of the heading relative to the viewport center and adjusts the font size accordingly. For larger screens, the code targets a specific heading element, whereas, for smaller screens, it applies the effect to multiple headings. This dual approach ensures that the font resizing effect is responsive and tailored to different screen sizes.

This technique allows for dynamic and engaging typography that enhances the user experience by making your headings responsive to scrolling. This method can be adapted to other elements and effects, providing endless possibilities for interactive web design.

Conclusion

By following this guide, you now have a clear understanding of how to implement responsive font size adjustments based on scroll position. This approach not only makes your website more interactive but also improves readability and user engagement. Feel free to experiment with different styles and effects to create a unique browsing experience for your visitors.