Как улучшить мою версию анимации и сделать работу clip медленнее?

Question

[Александр Крайс]

Подскажите, пожалуйста, как улучшить мой код.

Я пробую повторить необычную анимацию "закраски" текста при прокручивании страницы. Пример сайта: badassfilms.tv

Мне требуется замедилить clip, чтобы он медленнее работал, но не при помощи transition. Я добавил костыль по расчету расстояния, но уверен, что есть способы намного эффективнее моего. Также хотелось бы, чтобы clip работал на расстояниях по 25% снизу и сверху..

Пример написанного мною кода:

рабочий пример тут

<div class="main-scroller">
        <section>
            <div class="nav">
                <div class="nav__1">
                    Заголовок 1
                </div>
                <!-- /.nav__1 -->
                <div class="nav__2">
                    Заголовок 1
                </div>
                <!-- /.nav__2 -->
            </div>
            <!-- /.nav -->
        </section>
        <section>
            <div class="nav">
                <div class="nav__1">
                    Заголовок 2
                </div>
                <!-- /.nav__1 -->
                <div class="nav__2" >
                    Заголовок 2
                </div>
                <!-- /.nav__2 -->
            </div>
            <!-- /.nav -->
        </section>
        <section>
            <div class="nav">
                <div class="nav__1">
                    Заголовок 3
                </div>
                <!-- /.nav__1 -->
                <div class="nav__2">
                    Заголовок 3
                </div>
                <!-- /.nav__2 -->
            </div>
            <!-- /.nav -->
        </section>
        <section>
            <div class="nav">
                <div class="nav__1">
                    Заголовок 4
                </div>
                <!-- /.nav__1 -->
                <div class="nav__2">
                    Заголовок 4
                </div>
                <!-- /.nav__2 -->
            </div>
            <!-- /.nav -->
        </section>
        <section>
            <div class="nav">
                <div class="nav__1">
                    Заголовок 5
                </div>
                <!-- /.nav__1 -->
                <div class="nav__2">
                    Заголовок 5
                </div>
                <!-- /.nav__2 -->
            </div>
            <!-- /.nav -->
        </section>
    </div>
    <!-- /.main-scroller -->

@font-face {
      font-family: "Gilroy";
      src: url("/assets/fonts/Gilroy-Bold.eot");
      src: url("/assets/fonts/Gilroy-Bold.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/Gilroy-Bold.woff2") format("woff2"), url("/assets/fonts/Gilroy-Bold.woff") format("woff"), url("/assets/fonts/Gilroy-Bold.ttf") format("truetype"), url("/assets/fonts/Gilroy-Bold.svg#Gilroy-Bold") format("svg");
      font-weight: bold;
      font-style: normal;
    }
    
    
    section {
      position: relative;
      min-height: 100vh;
      width: 100vw;
      background-color: #b4e7ff;
      border: 1px solid tomato;
    }
    
    .nav {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 50px;
      text-align: center;
      width: 100%;
      font-family: "Gilroy", sans-serif;
      font-weight: bold;
      min-height: 70px;
    }
    
    .nav__1 {
      position: absolute;
      width: 100%;
      text-align: center;
      color: #3F3E3E;
    }
    
    .nav__2 {
      position: absolute;
      width: 100%;
      text-align: center;
      -webkit-text-stroke: 2px #3F3E3E;
      -webkit-text-fill-color: transparent;
    }

let windowHeight = document.documentElement.clientHeight,
        windowWidth = $(window).width(),
        topDistance = windowHeight/100*12,
        bottomDistance = windowHeight/100*70,
        nav1 = document.querySelectorAll('.nav__1');
    
    
    
    document.addEventListener('scroll', function () {
    
        for (let i = 0; i < nav1.length; i++) {
    
            getClip(nav1[i]);
    
        }
    });
    
    
    function getClip (element) {
    
        let coords = element.getBoundingClientRect();
    
        if (coords.y <= topDistance){ //когда заголовок за верхней "границей"
    
            element.style.color = '#3F3E3E';
            element.style.clip = 'rect( 0px, '+ windowWidth+'px, 0px , 0 )';
    
        } else  if (coords.y > topDistance && coords.y < bottomDistance){ //когда заголовок в середине экрана
    
            element.style.clip = 'rect( '+((170-coords.y))+'px, '+ windowWidth+'px, '+ windowHeight +'px , 0 )';
    
        } else { // и когда заголовок пересекает нижнюю "границу"
    
            element.style.clip = 'rect( 0px, '+ windowWidth+'px, '+ ((bottomDistance+130)-coords.y) +'px , 0 )';
    
        }
    }

Answer 1

[Александр Крайс]

Вопрос со скоростью клипа отпал, поэтому оставалось только решить проблему с расчетом расстояний. Для меня сработало следующее:

document.addEventListener('scroll', function () {

    for (let i = 0; i < nav1.length; i++) {
        elemHeight = nav1[i].offsetHeight;
        getClip(nav1[i], elemHeight);

    }
});


function getClip (element, height) {

    let coords = element.getBoundingClientRect();

    if (coords.y <= topDistance){ //когда заголовок за верхней "границей"

        element.style.color = '#3F3E3E';
        element.style.clip = 'rect( 0px, '+ windowWidth+'px, 0px , 0 )';

    } else  if (coords.y > topDistance && coords.y < bottomDistance){ //когда заголовок в середине экрана

        element.style.clip = 'rect( '+((topDistance+height)-coords.y)+'px, '+ windowWidth+'px, '+ windowHeight +'px , 0 )';

    } else { // и когда заголовок пересекает нижнюю "границу"

        element.style.clip = 'rect( 0px, '+ windowWidth+'px, '+ ((bottomDistance+height)-coords.y) +'px , 0 )';

    }
}

То есть я вычисляю высоту каждого элемента, прибавляю её к расстоянию либо снизу экрана, либо сверху и из этого числа отнимаю координаты, на которых сейчас находится элемент.

Посмотреть как это работает можно по прежнему Здесь

Заранее: это не работает в браузерах, не поддерживающих -webkit-text-stroke и -webkit-text-fill-color