What is the best way to decrease the size of the text in the header as the user scrolls down?

I have a fixed header with a large text. I would like the text to decrease in size as someone scrolls down, and return to its original size when the scroll is at the top.

The CSS applied when scrolling down should be:

font-size: 15px;     
padding-left: 15%;
top: 10px;

You can view where I want the text to move and how it should look like here.

Here is my HTML:

<div class="bignadpis">
    <p>Accounting and settlement <br> of healthcare in Svit</p>
</div>

And here's the CSS for it:

.bignadpis {
  z-index: 10001;
  font-family: 'Paytone One', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  text-transform: uppercase;
  position: fixed;
  float: left;
  padding-left: 5%; 
}

Any advice would be greatly appreciated :)

javascripthtmlcss

Answer №1

This solution could be exactly what you're seeking.

By adjusting the quantity parameter, you have the ability to control when it reaches "15px".

var changeSize = function(quantity)
{
  var scrollTop = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
  
  var size = 30 - ((scrollTop / quantity) || 0);
  
  if(size <= 15) size = 15;
  
  document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;');
};
window.addEventListener('scroll', function(){ changeSize(10) });
.bignadpis {
z-index: 10001;
font-family: 'Paytone One', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
text-transform: uppercase;
position: fixed;
float: left;
padding-left: 5%;
}

html
{
  height: 2000px;
}
<div class="bignadpis">
        <p>Accounting and settlement of healthcare in Svit<br></p>
    </div>

Regarding your second inquiry:

var changeSize = function(quantity)
{
  var scrollTop = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
  
  var size = 30 - ((scrollTop / quantity) || 0);
  
  if(size <= 15) size = 15;
  
  document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;');
};
window.addEventListener('scroll', function(){ changeSize(10) });
.bignadpis {
max-width: 400px;
z-index: 10001;
font-family: 'Paytone One', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
text-transform: uppercase;
position: fixed;
float: left;
padding-left: 5%;
}

html
{
  height: 2000px;
}
<div class="bignadpis">
        <p>Accounting and settlement of healthcare in Svit - And any additional text you desire!</p>
    </div>

Answer №2

If you want to experiment with resizing text on scroll, here is a simple example:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    #header {
      background-color: #f1f1f1;
      padding: 50px 10px;
      color: black;
      text-align: center;
      font-size: 90px;
      font-weight: bold;
      position: fixed;
      top: 0;
      width: 100%;
      transition: 0.2s;
    }
  </style>
</head>

<body>

  <div id="header">Header text</div>

  <div style="margin-top:200px;padding:15px 15px 2500px;font-size:30px">
    <p>This is an example of shrinking text.</p>
  </div>

  <script>
    // Change the header's font size based on scroll position
    window.onscroll = function() {
      updateFontSize()
    };

    function updateFontSize() {
      if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("header").style.fontSize = "30px";
      } else {
        document.getElementById("header").style.fontSize = "90px";
      }
    }
  </script>
</body>

</html>

This code snippet will help you understand how to resize text dynamically while scrolling.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with JQuery Radio button selection in Internet Explorer 6

Here is some code that I am working with: <input type="radio" name="HotelSearch_Measure" value="Miles"> <input type="radio" name="HotelSearch_Measure" value="KM"> While this code functions properly in IE9, Chrome, and Firefox, it does not wor ...

javascriptjqueryinternet-explorer-6

Move objects on the webpage by dragging and dropping them

My goal is to create a website with drag-and-drop functionality for elements, similar to Wordpress widgets. Users should be able to easily add text boxes to different areas on the site by simply dragging and dropping them. If necessary, they can also choos ...

javascriptphpjqueryhtmldrag-and-drop

Error: Unable to access the 'resource' property as it is undefined

I am currently working on a project that involves fetching the latest 4 results from Craigslist using a query. Although I have successfully retrieved all the relevant information, I seem to be encountering an issue with loading the URL of the image from th ...

javascriptjqueryhtmljson

Guide on attaching an onclick function to a search bar

I found a search bar code on this website and I want to enhance it by adding a function that redirects users to a URL when they click on the search icon. Here is the existing code: <svg xmlns="http://www.w3.org/2000/svg" style="display:none"> ...

javascript

What is the process for obtaining a fresh token from Cognito using the frontend?

Currently, I am working with a react app that utilizes Cognito for user authentication. My main query revolves around making a call to Cognito using the refresh token in order to receive a new token. Despite researching various examples provided by Cognit ...

javascriptreactjsamazon-cognito

import shaders from next.js

In my web app built with next.js, I am utilizing WebGL to render a 2D scene. Currently, I have my fragment and vertex shaders hardcoded as strings in my JavaScript: var fragmentShaderSource = [ ` #ifdef GL_ES`, `precision highp float;`, ` #en ...

javascriptnext.jsshaderwebgl

Using a glass of water as a metaphor to illustrate advancements in CSS and JQuery

I've been working on a new app and have recently started implementing some significant changes. The app has a unique feature that allows users to track their water intake and compare it to their set goal. One key aspect I am struggling with is creati ...

jquerycssprogressanimated

What causes the appearance of a slight space between a child element positioned absolutely and its parent element with borders? All the margins, padding, and positions have been assigned a value of

I have encountered a peculiar issue that I managed to recreate in a simplified version. In my scenario, the parent element has the CSS property position: relative, while the child element with the ::after pseudo-element has position: absolute and all direc ...

htmlcsscss-position

How can I utilize CSS to dictate color schemes on an HTML5 canvas element?

Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...

csshtml

Most effective method for retrieving data from a database to display on a React user interface

I am currently working on a project where I need to show the value of a collection property stored using mongoose in my react app's client side whenever a user clicks a button. I am attempting to retrieve the value on click and then use setState to s ...

javascriptnode.jsreactjsaxios

JTextPane Highlighting Issues: Offsets Not Aligned Properly

Working on a Text Editor project in Java that incorporates Syntax Highlighting with JTextPane. Upon running the program, encountering unexpected output at: The aim is to highlight all HTML tags in pink color, however, the highlighting seems to be inaccura ...

javahtmljtextpane

Is the sudden disconnection from Chrome after a WebSocket handshake related to a domain mismatch or is it possibly a bug in Chrome?

I created my own WebSocket server using Python, but I encountered an issue where Chrome 4.0.249.78 dev (36714) always disconnects after the handshake process. Wanting to rule out any issues with my code, I tested it using the WebSocket server from , only t ...

javascriptpythongoogle-chromewebsocket

Keep verifying the boolean value repeatedly

I've been working on implementing infinite scroll functionality for my card elements. Within my data.service file, I have a variable called reload that is utilized to determine whether more data needs to be loaded. This variable is set to true when th ...

javascriptangulartypescriptobservable

Having issues with resolving or rejecting promises when using $http get requests

I am facing a challenge in rejecting a deferred object within a $http.get call as it is not getting properly rejected. The error callback does not get triggered, and I'm struggling to understand why this is happening. Here is an outline of what my cod ...

javascriptangularjs

Creating a separate CSS file for a CSS class that sets the width of a <div

I am looking to enhance a div element by incorporating a specific class from a separate CSS file. For example, my HTML file contains the following snippet: /* width 90% */ @media (min-width: 960px) { div.width90 { max-width: 90%; } } <div cl ...

htmlcss

What is the best way to change any timezone to the local timezone using JavaScript?

Check out the code snippet below that is designed to convert a date to the local timezone: function convertDateToServerDate(incomingDate) { var serverOffset = new Date(); serverOffset = serverOffset.getTimezoneOffset(); var outgoingServerDate = new Date ...

javascriptnode.js

The text remains static and does not adjust its size when the screen is

I'm currently utilizing the text-only carousel feature found at this jsFiddle link. Below is the code I am using for resizing: window.addEventListener("resize", resetCarousel); function resetCarousel(){ setCarouselHeight('#carousel-text&apos ...

javascriptcsstwitter-bootstrapresponsive-designcarousel

How can a 'complete' event listener be executed for a custom function in JQuery/JavaScript?

Here is the code snippet I'm working with: $('.fblikes span').fblikecount(); $.fn.fblikecount = function(){ //Perform JSON XHR operations to retrieve FB like counts and update the page numbers } This code will cycle through all insta ...

javascriptjquerycallbackevent-handling

Achieving accurate character input during keyboard events

In the process of creating a word game, I encountered the challenge of retrieving the last character typed by users on their keyboards. After experimenting with different approaches, I came up with two solutions. The first method involves capturing each c ...

javascriptjquerykeyboard-events

Error: Cannot access 'addEventListener' property of null in Chrome Extension due to TypeError

I've been working on developing a chrome extension that autofills input forms in web pages. However, I encountered an error that says "cannot read properties of null." This issue arises when I try to add an event listener to a button in my code. The f ...

javascripthtmldomgoogle-chrome-extensionaddeventlistener