Increase text size when scrolling

Question

Increase text size when scrolling

Navigation

#1 by (3 votes)

2

How do I scroll the page to increase the size of the text? I would like every%% text to increase by 50px to scroll the page to a total of 10px top.

Below is Fiddle and Snippet:

JsFiddle

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
      $(".texto").addClass("t1");
    } else {
      $(".texto").removeClass("t1");
    }
    if ($(document).scrollTop() > 100) {
      $(".texto").removeClass("t1");
      $(".texto").addClass("t2");
    } else {
      $(".texto").removeClass("t2");
    }
    if ($(document).scrollTop() > 150) {
      $(".texto").removeClass("t1");
      $(".texto").removeClass("t2");
      $(".texto").addClass("t3");
    } else {
        $(".texto").removeClass("t3");
    }
    if ($(document).scrollTop() > 200) {
      $(".texto").removeClass("t1");
      $(".texto").removeClass("t2");
      $(".texto").removeClass("t3");
      $(".texto").addClass("t4");
    } else {
      $(".texto").removeClass("t4");
    }
  });
});

* {
  margin: 0;
  padding: 0;
  color: #0096FF;
}
.texto {
  padding-top: 10%;
}
body {
  height: 5000px;
}
.t1 {
  font-size: 46px;
}
.t2 {
  font-size: 56px;
}

.t3 {
  font-size: 66px;
}
.t4 {
  font-size: 76px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><html><head><metacharset="utf-8">
       <title>Teste</title>
    </head>
    <body>
       <h1 class="text-center texto fixed-top">Teste</h1>
    </body>
</html>

javascript html jquery css

asked by anonymous 20.09.2017 / 18:16

1 answer

Filter query with java android sqlite How to do a while with 2 checks

score 3 · Accepted Answer

This changes a bit what you want in the pixel issue, but I think it will look better in the end result.

You set the min and max and the intensity that the font grows in the control variable.

$(document).ready(function(){
  var min = 50;
  var max = 1000;
  var controle = 0.1;
  var unidade = 'px';
  var valor = 0;
  $(".texto").css("font-size",min + unidade);
  $(window).scroll(function() {
    valor = $(document).scrollTop() * controle + min;
    if(valor < min){
      return;
    }
    if(valor > max){
      return;
    }
    $(".texto").css("font-size",valor + unidade);
  });
});

link