Как можно реализовать скролл годов css, javascript?
Подскажите, пожалуйста, как можно реализовать скролл годов вместе с текстом, как на этом сайте: https://naftagaz.com/company/
Ответы (1 шт):
Открой нужный элемент в html (пкм, посмотреть код элемента) и посмотри классы и стили которые там используются. Посмотри что меняется при прокрутке
У нас тут при прокрутке меняются стили у 2х элементов:
<div class="history-sticky__sticky sticky__sticky js-sticky-content is-inview" data-scroll="" data-scroll-sticky="" data-scroll-target="#history-sticky" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 10501, 0, 1);">
<rect class="js-sticky-history-progress" x="0.5" y="0.5" rx="1" width="2" height="2" pathLength="1" style="stroke-dashoffset: 0px;"></rect>
Сами стили:
style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 10501, 0, 1);"
style="stroke-dashoffset: 0px;"
Читаем:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
https://css-tricks.com/almanac/properties/s/stroke-dashoffset/
Дальше гуглим "Как отловить скролл/прокрутку колесиком мыши на JS" https://learn.javascript.ru/onscroll
Дальше пишем функцию на JS, которая запускается когда начинается скролл (прокрутка) мышкой и меняет стили transform: matrix3d и stroke-dashoffset у нужных элементов