Движение блока по кривой во время прокрутки страницы
1,00
р.
Добрый день! Подскажите, пожалуйста, каким образом это сделано. На примере этой страницы - http://krym.dramina.ru (после нажатия кнопки "начать путешествие"). Одновременно при скроллинге страницы вниз на заднем фоне закрашивается кривая (маршрут). При прокрутке некоторых блоков (текста) движение линии становится неподвижным, после снова продолжается. Для меня это очень интересно. Хотел бы увидеть это на каком-нибудь конкретном минимальном примере, где четко будет виден код скрипта и стиль и сама разметка html, чтобы понять логику такой реализации. Буду очень благодарен вам за примеры!
Ответ
Если посмотреть код, то сорцах отрисовка идёт в crimea-app.js и crimea-watter. Реализация в 2х словах. 1 есть блок текст с секциями
Ответ
Если посмотреть код, то сорцах отрисовка идёт в crimea-app.js и crimea-watter. Реализация в 2х словах. 1 есть блок текст с секциями
... ...
Инстанцируется канвас с картой. При прорутки до определённого блока срабатывает событие onScroll где стоит брекпоинт (data-stay=true) и изменяются координаты картинки в результате карта двигается. И рисуется линии маршрута с помощью методов канваса. Тоесть beginPath() начинает прорисовку moveTo(x, y) устанавливает позицию рисует точку lineTo(x, y) arc дугу делает. В результате получается кривая маршрута.
Инстанцируется канвас с картой. При прорутки до определённого блока срабатывает событие onScroll где стоит брекпоинт (data-stay=true) и изменяются координаты картинки в результате карта двигается. И рисуется линии маршрута с помощью методов канваса. Тоесть beginPath() начинает прорисовку moveTo(x, y) устанавливает позицию рисует точку lineTo(x, y) arc дугу делает. В результате получается кривая маршрута.
