@leraweb

Как реализовать подобную анимацию?

Подскажите как реализовать подобную анимацию? При скролле двигается линия, точнее она заполняет svg. В конце при нажатии появляются доп блоки.
Возможно есть какой-то плагин? Или же как на сайте с помощью svg?

Пробовала делать два слоя, но выходит коряво. Хотелось бы понять как это грамотно сделать.
https://praktikum.yandex.ru/data-analyst/
602166dfd919d289822293.png

Буду рада любой помощи. Заранее благодарю!
  • Вопрос задан
  • 127 просмотров
Пригласить эксперта
Ответы на вопрос 2
sfi0zy
@sfi0zy Куратор тега HTML
UI developer. Верстаю неверстаемое.
Это реализуется с помощью свойств stroke-dasharray и stroke-dashoffset в SVG. Слушаем событие скролла - меняем значения. Подробнее в статье про пунктирные вау-эффекты. Вам нужна пятая демка - там как раз вот почти то же самое рисуется при скролле. На сайте Яндекс.Практикума эту линию поделили на небольшие части для удобства/оптимизации, но принцип тот же.
Ответ написан
LenovoId
@LenovoId
I want, women not to get sick
Конечно порно жёсткое ...но я сделал маску и под низом маски увеличиваю по высоте div с светлозелёным фоном ...вроде то что надо но нужно придумать как это прикрутить к вашему случаю, дэмо => https://codepen.io/topicstarter/pen/poNbaaG
Ответ написан
Ваш ответ на вопрос

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

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