Как использовать функции замедления при прокрутке - PullRequest
Новая
       33

Как использовать функции замедления при прокрутке

0 голосов
/ 03 мая 2020

Я пытался выяснить, как использовать функции замедления, связанные с событием прокрутки, для создания эффекта прокрутки в стиле импульса. Я использовал метод LERP, чтобы просто облегчить прокрутку с линейным ослаблением.

Но я пытался выяснить, как добавить Easing Functions , чтобы при желании я мог получить эффект easeOut или easeIn. Я не могу понять, как применить эту логику c к событию прокрутки. Я видел много примеров того, как перемещать элементы или прокручивать страницу из одной позиции в другую, но я не могу понять, как это сделать, когда пользователь выполняет прокрутку.

Вот простой пример моего метода LERP:

Скрипка 

let _current = 0;

const display = document.querySelector('.display');
const container = document.querySelector('.container');

const animate = () => {
	  const i = lerp(_current, window.scrollY, 0.08);
    _current = Math.floor(i * 100) / 100;
    
    display.innerHTML = _current;
    container.style.transform = `translateY(${-_current}px)`
    window.requestAnimationFrame(animate);
}

const lerp = (a, b, t) => {
    return (1 - t) * a + t * b;
}

function easeOutQuad(t) {
	return 1 - (1 - t) * (1 - t);
}

const height = container.getBoundingClientRect().height;
document.body.style.height = height + 'px';

animate();
*{
  box-sizing: border-box;
}

body{
  margin: 0;
}

.display{
  position:fixed;
  top:50%;
  left:50%;
  width: 200px;
  padding: 10px;
  background: rgb(220,220,220);
  transform: translate(-50%,-50%);
  border-radius: 10px;
  text-align: center;
}

.container{
  position:fixed;
  top:0;
  left:0;
  width: 100%;
  height: 600vh;
  border: 10px dashed green;
  overflow:hidden;
}
<div class="container"></div>
<div class="display">0</div>
...