Как сделать такой parallax + svg?

Question

[Dark19]

Доброго времени суток! Подскажите, какой плагин лучше всего использовать для такого эффекта паралакса как здесь https://serioverify.com на вкладках Our Process и Features? Можно ли будет сделать схожий эффект с svg? Дайте несколько наставлений, а то я делал паралаксы, но простенькие. Может мануал какой кто подкинет почитать/посмотреть, буду очень благодарен.

Answer 1

[Dark19]

В общем я отыскал для себя 2 варианта:
1) это воспользоватся нативным скроллом вот я примерчик быстро наваял codepen.io/dark19/pen/ybboPw , но есть проблемка в том, что я не придумал как задерживать секцию до полного выполнения анимации, может кто знает, то подскажитет;
2) это воспользоватся готовым решением с помощью плагинов GSAP и ScrollMagic (как мне тут подсказали, но удалили коммент). Вот этим вариантом я и воспользовался. Но нужно хорошо разобраться в документации.
На jquery мне показалось проще как-то все сделать, но у меня не было там сверхзадач в проекте. Мне нужно было просто заполнять свг линию цветом и по мере её заполнения в некоторых участках анимировать блоки html(тут ещё есть грабли: рисуйте svg как path потому, что потом вы не сможете заполнить его цветом, там нужно будет использовать свойства stroke-dasharray и stroke-dashoffset). Но я все таки воспользовался плагинами, хотя, я думаю, зря, так как я вручную прописывал точки заполнения свг и когда должна произойти анимация, по другому я не знаю как вычислить степень заполнения линии. Вот вам ещё пример GSAP + ScrollMagic правда тут он без эффектов codepen.io/dark19/pen/WjwoWm

Answer 2

[Владимир Хаттер]

Используй js события скролла.