2

Como faço para quando rolar a pagina aumentar o tamanho do texto? Gostaria que a cada 50px o texto aumentasse em 10px ate rolar a página a um total de 1000px do topo.

Segue abaixo Fiddle e 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>

7
  • voce pode usar javascript para fazer isso.. domina JS? 20/09/2017 às 16:35
  • conhecimento basico de jquery. 20/09/2017 às 16:37
  • tentei fazer e consegui porem o codigo ficou mt grande 20/09/2017 às 16:38
  • pode colocar aqui o codigo. a gente pode tentar optimizar. 20/09/2017 às 16:38
  • sou novato aqui como faço isso? 20/09/2017 às 16:39

1 Resposta 1

3

Isso muda um pouco o que você quer na questão do pixel, mas acredito que vá ficar melhor no resultado final.

Você configura o min e o max e a intensidade que a fonte cresce na variável controle.

$(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/

8
  • O texto começa mt pequeno tem como ele começar um pouco maior? 20/09/2017 às 19:57
  • O valor inicial você pode colocar no css ou colocando em cima de $(window) o código, $(".texto").css("font-size","20px"); por exemplo e no min você consegue regular o tamanho minimo que ele vai ficar usando o scroll. 20/09/2017 às 20:00
  • ok funcionou porem quando volto pra cima fica pequeno denovo mesmo definindo no js 20/09/2017 às 20:29
  • VC alterou o valor de min também? 20/09/2017 às 20:32
  • coloquei o codigo em cima do $(window) em baixo das var 20/09/2017 às 20:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .