3

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

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

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

2

1 ответ 1

5

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>

7
  • Отлично ! а как добавить плавность через animate (jquery)?
    – Адрей
    31 авг 2019 в 8:34
  • сейчас попробую, если не получится то поможете (могу наградить (number RUB))
    – Адрей
    31 авг 2019 в 8:41
  • ок буду ждать ) тут можно оставить контакты ?
    – Адрей
    31 авг 2019 в 9:22
  • @Адрей вот смотрите 31 авг 2019 в 10:30
  • оставьте телеграм напишу вам
    – Адрей
    31 авг 2019 в 11:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.