Мерцание текста после изменения размера шрифта по событию прокрутки - PullRequest
Новая
       24

Мерцание текста после изменения размера шрифта по событию прокрутки

0 голосов
/ 27 февраля 2019

У меня есть этот код JavaScript, который изменяется font-size на основе window.scrollY. 

var title = document.querySelector('.title')
var titleFontSizePX = getComputedStyle(title).fontSize
var titleFontSizePXInt = parseFloat(titleFontSizePX)

var titleFontSizeVWInt = titleFontSizePXInt * (100 / window.innerWidth)
var titleFontSizeVW = titleFontSizeVWInt + 'vw'
title.style.fontSize = titleFontSizeVW

function updateFontSize(event) {
  console.log('fire!', event.type, window.scrollY)
  var titleSizeMax = titleFontSizeVWInt - 0.02 * window.scrollY
  var titleSizeMin = titleFontSizeVWInt * 2 / 5
  title.style.fontSize = Math.max(titleSizeMin, titleSizeMax) + 'vw'
}

var events = ['scroll', 'touchmove']
events.forEach(event => document.addEventListener(event, updateFontSize))
body {
  background: #111;
  padding: 40vh 10vw 10vw;
  font-family: 'Rubik';
  color: white;
}

h1 {
  font-size: 12vw;
  line-height: 1em;
  font-weight: 700;
}

p {
  font-size: 1.4rem;
  line-height: 1.6em;
  font-weight: 400;
  margin-top: 2em;
  max-width: 50%;
}
<h1 class="title">
  This is a big<br> hero copy to<br> say a couple<br> words about<br> this website.
</h1>

<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches
  into stiff sections. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His
  room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
<p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with
  a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</p>

Кажется, все работает нормально, за исключением того, что иногда событие прокрутки запускается несколько раз, в результате чего текст зацикливается.Я тестировал различные методы отладки, такие как отладка, регулирование, установка line-height вручную и т. Д., Но ни один из них не работал.

Кроме того, вы можете ввести в консоли window.scrollTop(0, number), чтобы вызвать эффект мерцания.Попробуйте разные номера.В какой-то момент это произойдет.

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

Вот видео: https://youtu.be/Kiwwcabmqcc

И кодекс: https://codepen.io/podrivo/pen/zebWmW

Спасибо!

1 Ответ

0 голосов
/ 28 февраля 2019

Решение состоит в том, чтобы установить последнюю позицию прокрутки, которая будет отличаться от фактической позиции прокрутки.Так что JavaScript такой: 

var title               = document.querySelector('.title')
var titleFontSizePX     = getComputedStyle(title).fontSize
var titleFontSizePXInt  = parseInt(titleFontSizePX, 10)

var titleFontSizeVWInt  = titleFontSizePXInt * (100 / window.innerWidth)
var titleFontSizeVW     = titleFontSizeVWInt + 'vw'
title.style.fontSize    = titleFontSizeVW

var lastScroll          = 0

function updateFontSize(event) {
  if (lastScroll != window.scrollY) {
    var titleSizeMax      = titleFontSizeVWInt - 0.02 * window.scrollY
    var titleSizeMin      = titleFontSizeVWInt * 2 / 5
    title.style.fontSize  = Math.max(titleSizeMin, titleSizeMax) + 'vw'
  }
  lastScroll = window.scrollY
}

var events = ['scroll', 'touchmove']
events.forEach(event => document.addEventListener(event, updateFontSize))
...