Как анимировать движение элемента вдоль svg-пути при прокрутке?

#javascript #html #css3 #svg #анимация

У меня проблема: Мне нужно изменить угловое положение элемента при прокрутке.
 Как и на моей веб-странице,- это длинный путь с фоном - и мне нужно анимировать
движения автомобиля по этому пути во время скролла.      

Я  объясню здесь: http://prinzhorn.github.io/skrollr-path/ - идеальное решение, отвечающее
моим требованиям. Но, к сожалению, это очень устарело.    

Может быть, у кого-то есть современная библиотека решений? Или кодовые идеи, как
анимировать элемент через svg-path с прокруткой страницы?       

Также я попробовал http://scrollmagic.io/examples/expert/bezier_path_animation.html
- но это не то, что мне нужно, потому что мой path более сложный, а  не только пара
кругов.   

Источник
    

Ответы

Ответ 1

Вот немного кода vanilla JavaScript, который перемещает "автомобиль" вдоль пути в
зависимости от того, насколько страница прокрутилась.       

Это  должно работать во всех современных браузерах. Часть кода, которую вам может
потребоваться настроить, — это то, как мы получаем высоту страницы (document.documentElement.scrollHeight).    

Возможно, вам придется использовать разные методы в зависимости от браузеров, которые
вы хотите поддерживать. 



function positionCar() {
  var scrollY = window.scrollY || window.pageYOffset;
  var maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
  var path = document.getElementById("path1");
  // Calculate distance along the path the car should be for the current scroll amount
  var pathLen = path.getTotalLength();
  var dist = pathLen * scrollY / maxScrollY;
  var pos = path.getPointAtLength(dist);
  // Calculate position a little ahead of the car (or behind if we are at the end),
so we can calculate car angle
  if (dist + 1 <= pathLen) {
    var posAhead = path.getPointAtLength(dist + 1);
    var angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
  } else {
    var posBehind = path.getPointAtLength(dist - 1);
    var angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
  }
  // Position the car at "pos" totated by "angle"
  var car = document.getElementById("car");
  car.setAttribute("transform", "translate(" + pos.x + "," + pos.y + ") rotate("
+ rad2deg(angle) + ")");
}

function rad2deg(rad) {
  return 180 * rad / Math.PI;
}

// Reposition car whenever there is a scroll event
window.addEventListener("scroll", positionCar);

// Position the car initially
positionCar();
body {
  min-height: 3000px;
}

svg {
  position: fixed;
}





Источник