Как привязать положение (размер) элемента к скролу секции?

Доброго всем дня. Встал вопрос о том, как привязать ширину (высоту) "столбцов" инфографики к скролу? Задача стоит в том, что при скролее страницы, а именно секции, в которой инфографика есть, она отрисовывалась бы от стартового значения, до конечного. То есть пока листаем страницу в месте, где эти графики находятся, происходила привязка с скролу и при перемещении страницы вниз шло визуальное изменение. Уже голова пухнет и не понимаю как реализовать связку.

Может есть библы, для таких глупых как я или это реально реализовать достаточно просто? С цифрами та же история, нужно чтобы счетчик срабатывал, как и отрисовка у всех элементов одновременно.

5ffea6813c5be050714144.png
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
sinneren
@sinneren
Вадим, я додумываю за тс, но мне кажется он хочет не запустить анимацию, а при каждом скролле(повороте колеса мыши), чтобы прибавлялось значение в графике,а это уже другая история, хотя и не исключает приведенного примера, т.к. начинать тоже нужно в определенный момент.

для тс Вячеслав Дроздов же скажу, выше приводили интерсекшн - с ним понять когда попал в зону видимости ок, можно еще и считать scrollTop и offsetTop у элемента, исходя из этих же данных вычислять начало\конец блока, что и будет отправной и конечной точкой для добавления % ширины\высоты графиков. Предполагаю так же, что считать надо только при увеличении значений скролла. Но всё это индивидуально, готового решения не выкатишь тут прям.

Вдохновиться можно индикатором https://codepen.io/MadeByMike/pen/ZOrEmr
Как меняется шапка https://codepen.io/osublake/pen/NdEONL
Если всё таки просто запускать анимацию при опр положении скролла https://codepen.io/michalsnik/pen/WxNdvq (https://css-tricks.com/aos-css-driven-scroll-anima...)

и вот тут есть пример с полоской https://alexcambose.ro/motus/#/README

счётчики имеют те же начало-конец, что можно интерпретировать как 0-100%, с округлением. либо задать массив конкретных значений который каждые Н процентов будет брать Н-ый элемент массива. Например, массив из [5, 16, 36, 89] (положим это крайние занчения, или у них там 0 и 100 крайние, то их можно захардкодить в конце. И при скролле в шаг 25% от всего отображать каждые 25% н+1 элемент массива
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы