Как сделать плавное увеличение ширины по мере скролла?

Question

[Zombie42679]

Есть пример с красивого сайта - cedricklachot.com/project/easytiger , там по мере скролла сверху уезжает плашка влево, хочу сделать примерно такое же, только с увеличением ширины. В примере, каждый небольшой скролл - шаг вниз (шаг = 90px) прибавляют как раз эти 90px, помогите сделать в примере ниже, каждые 120px скролла вниз добавлять по 120px и наоборот отнимать, если вверх по 120px

https://jsfiddle.net/w0v4Loxh/1/

Answer 1

[0xD34F]

const $el = $('.banner');
const baseWidth = $el.width();

$(window).scroll(function() {
  $el.width(baseWidth + $(this).scrollTop());
});

или

const el = document.querySelector('.banner');
const baseWidth = el.offsetWidth;

document.addEventListener('scroll', () => {
  el.style.width = `${baseWidth + document.documentElement.scrollTop}px`;
});