Increase text size by scrolling the page

Asked

Viewed 73 times

2

How do I when scrolling the page increase the size of the text? I would like each 50px the text increased in 10px to scroll the page to a total of 1000px top-down.

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>
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>Teste</title>
    </head>
    <body>
       <h1 class="text-center texto fixed-top">Teste</h1>
    </body>
</html>

javascript jquery html css

  • Voce can use javascript to do this.. domina JS?

  • basic knowledge of jquery.

  • I tried to do it and I managed to put the code

  • can put here the code. we can try to optimize.

  • I’m new here as I do it?

  • click on editar then click on {} and put the code

  • @Lucassimao Create an https://jsfiddle.net/ and click save and then send the link

Show 2 more comments

1 answer

3


This changes a little what you want in the pixel issue, but I believe it will look better in the final result.

You configure the min and max and the intensity that the source 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);
  });
});

https://jsfiddle.net/wictor/7n02aLbx/2/

  • The small mt starts text has how it get a little bigger?

  • The initial value you can put in css or put on top of $(window) the code, $(".text"). css("font-size","20px"); for example and in min you can regulate the minimum size it will be using scroll.

  • ok worked but when I go back up gets small again even setting in js

  • VC changed the min value too?

  • I put the code on the $(window) below the var

  • @Lucassimao changed, now da para customize even more, and just put the value in the min that it will start with that value.

  • and the same link or changed?

  • I forgot to change the link, I just changed.

Show 3 more comments

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.