Как я могу уменьшить размер текста в заголовке при прокрутке пользователем вниз?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я исправил заголовок с одним текстом большего размера. Я бы хотел, чтобы текст уменьшался, когда кто-то прокручивает вниз и возвращается к своему размеру, когда прокрутка находится вверху.

CSS, применяемый при прокрутке вниз, должен быть:

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

Здесь вы можете увидеть, куда я хочу переместить этот текст (как это выглядит)

Мой HTML:

 <div class="bignadpis">
    <p>Účtovníctvo a zúčtovanie <br> zdravotnej starostlivosti Svit</p>
</div>

и CSS для этого

 .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% 
}

Спасибо за любой совет 🙂

Ответ №1:

Возможно, это тот результат, который вы ищете.

Манипулируя quantity значением, вы можете сами определить, когда оно достигнет « 15px «.

 var scrollCn = 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(){ scrollCn(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>Účtovníctvo a zúčtovanie <br> zdravotnej starostlivosti Svit</p>
    </div>

На ваш второй вопрос

 var scrollCn = 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(){ scrollCn(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>Účtovníctvo a zúčtovanie zdravotnej starostlivosti Svit - And more string you want!</p>
    </div>

1. Привет, спасибо, но мне понадобится немного больше помощи, текущий статус таков, что он работает, но мне нужно будет что-то добавить. когда я использую «<br>» в этом «<p>», и он будет прокручиваться и уменьшаться, он не помещается в заголовок. итак, мне нужно, чтобы он прерывался, когда я нахожусь на верхней и полной строке при прокрутке, у вас есть какие-либо предложения?

2. Для этого вы должны указать max-width значение » .bignadpis » в классе «». Вы также должны удалить » <br /> «. Я добавляю новый пример.

3. Большое, очень большое спасибо 🙂 все работает просто отлично

Ответ №2:

Вы можете поиграть с этим:

 <!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>
    // When the user scrolls down 50px from the top of the document, resize the header's font size. You can modidy this.
    window.onscroll = function() {
      scrollFunction()
    };

    function scrollFunction() {
      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>

Это должно дать вам основную идею об изменении размера текста при прокрутке.