Где можно увидеть реализацию такого эффекта при скролле?

Question

[Alma410]

Приветствую.
Пытаюсь найти реализацию такого эффекта с интерактивного картой при скролле. https://fex.net/ru/s/mrxcrov
Подскажите пожалуйста ресурс где можно ознакомится с реализацией данного эффекта

Comments

[WbICHA]

Какая интересная анимация. Жёлтый круг в конце это область поражения?

[ksnk]

WbICHA, Турция, вроде, пока еще не ядерная держава. Не должно быть :)

Answer 1

[Виталий Першин]

Можно создать видео этой анимации и проигрывать его при прокрутке используя locomotive-scroll

Comments

[Вадим Освальд]

Вот тоже идея отличная! Делаешь анимацию в AE, с помощью локомотива так же отслеживаешь скролл и таймкод видео, синхронизируя их, как тебе нужно.
На практике все это может оказать чуть сложнее, чем мы пишем, но общая суть изложена

Answer 2

[Вадим Освальд]

Пару лет назад видел подобную идею, но с прорисовкой подписи человека по скроллу, выглядело достаточно свежо и я тогда пытался разобраться с реализацией. Прямо сходу не вспомню всех нюансов, но тебе точно нужна динамическая прорисовка SVG.
Изучи свойства stroke-dasharray и stroke-dashoffset.
Сначала через svg отрисовываешь нужные линии, а уже JS прорисовывает их в зависимости от процента скролла:

const progress = Math.min(scrollPosition / (documentHeight - windowHeight), 1);
      line.style.strokeDashoffset = totalLength * (1 - progress);
    };