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

109

27 октября 2019, 20:30

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

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

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

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

тут почему-то не работает код, но есть рабочий пример тут.

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 )'; 
  } 
}

@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; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<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 -->

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