JSFiddle - React, Tailwind, and code Playground

HTML

<div>TEST</div>

CSS

body {
    margin: 0;
}

div {
    margin: 1000px 0;
    line-height: 500px;
    text-align: center;
    background: green;
}

JavaScript

document.addEventListener('DOMContentLoaded', updateDivFontSize);
window.addEventListener('scroll', updateDivFontSize);

function updateDivFontSize() {
    var div = document.querySelector('div'),
        divScrollCoef = getScrollCoef(div);

    div.style.fontSize = divScrollCoef * 9 + 1 + 'vw';
}

function getScrollCoef(element) {
    var elementRect = element.getBoundingClientRect(),
        elementOffsetTop = elementRect.top,
        elementOffsetBottom = elementRect.bottom,
        windowOffsetBottom = document.documentElement.clientHeight,
        coef;

    if (windowOffsetBottom < elementOffsetTop) {
        coef = 0;
    } else if (windowOffsetBottom > elementOffsetBottom) {
        coef = 1;
    } else {
        coef = (windowOffsetBottom - elementOffsetTop) / (elementOffsetBottom - elementOffsetTop);
    }

    return coef;
}