Просто привяжите обработчик события к событию scroll
. Получите свою позицию от $(window).scrollTop()
, и с помощью этой информации потяните и/или измените размер вашего круга кругов по мере необходимости.
Есть способы получить эффект на сайте без холста. Вы можете использовать position:fixed
divs с высоким border-radius
, чтобы создавать круги, и вы можете изменить их размер и изменить их с помощью JQuery. Вы также можете использовать SVG, с помощью которого вы можете сначала создать массив всех объектов окружности с радиусом 0 и увеличить или уменьшить радиус с помощью эффекта прокрутки (или вашего набора данных). Если вы используете холст, возможно, вам придется подготовиться к повторному отображению всего холста на каждом тире прокрутки, так как будет трудно заставить круги «сжиматься» иначе. Это, вероятно, сделает вашу прокрутку изменчивой, как и для меня на сайте.