JSFiddle - React, Tailwind, and code Playground

by wictor

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<h1 class="texto">Teste</h1>

CSS

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

JavaScript

$(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);
  });
});