Как сделать такую прокрутку по странице?

Как можно было бы сделать такую прокрутку по странице? В плане страница стоит на месте, а при прокрутке элементы как-то меняют свои значения.


Ответы (1 шт):

Автор решения: SiRanWeb

Для начала, страница все-таки не стоит на месте, прокрутка все равно идет. Такие анимации совершаются с помощью события scroll, получения значений из scrollingElement и работой с requestAnimationFrame. По этим данным на JS уже можно рисовать анимации. Выходит что-то такое:

window.addEventListener('scroll', () => {  
  // По этим данным уже можно что-то отрисовать
  const scrollingElem = document.scrollingElement;
  const scrollTop = scrollingElem.scrollTop;
  const maxScrollTop = scrollingElem.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  // ...
});

Универсальных способов тут нет, все индивидуально. Самой лучшей идеей будет посмотреть примеры реализаций подобных сайтов. Вот неплохой пример

→ Ссылка