Как сделать такую анимацию (по скроллу)?

118

28 июня 2021, 07:10

В этой странице в самом низу есть анимация вокруг оси изображения (сделайте скролл в низ и увидите). Подскажите пожалуйста, как такую анимацию сделать?

Суть анимации: надпись вращается вокруг оси изображения и изображения увеличивается на весь экран (после окончания анимации) и анимация приходит (привязана к скроллу) при скролле.

Ссылка на видео.

Answer 1

let value = 0, v = 0;
let transform = (e,r,s) => e.setAttribute('transform',`scale(${s})rotate(${r})`);
requestAnimationFrame(draw);
function draw(t) {
  let speed = Math.max(0.0001, Math.abs(value-v)*0.1);
  if (v < value) v = Math.min(value, v+speed);
  if (v > value) v = Math.max(value, v-speed);
  transform(path, v*360, 1);
  transform(text, 0, 1+v*2);
  transform(img, v*90-45, 0.9+v*2);
  requestAnimationFrame(draw);
}
document.querySelector('svg').addEventListener('wheel', e => {
  value = Math.min(1, Math.max(value + Math.sign(-e.wheelDelta)*0.02, -0.3));
  e.preventDefault()
});

body {
  margin: 0;
  overflow: hidden;
}

<svg viewbox="-200 -200 400 400" height="100vh" width=100vw>
  <defs>
    <clipPath id=clip>
      <path id=path d="M-100,0a100,100,0,1,1,0,0.1z" fill=none></path>
    </clipPath>
  </defs>
  <text id=text>
    <textPath href="#path">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut. → 
    </textPath>
  </text>
  <image id=img xlink:href="https://picsum.photos/id/41/400/400" 
         clip-path="url(#clip)" x=-100 y=-100 width=200 height=200></image>
</svg>