Как сделать тянущую анимации за курсором мышки без библеотек?

Question

[Pit]

Как сделать тянущую анимации за курсором мышки без библеотек ?

Мне нужно примерно как здесь сделать https://www.madwell.com/
Когда мышка останавливается то анимация еще чуть доводиться до конца и тоже останавливается, чтобы не было рывков резких

Пока что у меня вот такой код https://codepen.io/pit6262/pen/KKpByGa

Answer 1

[Максим Морев]

Вам нужно использовать функцию линейной интерполяции (да, у нас в веб-анимации есть немного математики).
А также перестать использовать setInterval за этим делом, используйте requestAnimationFrame.
Вот вам статья, которая натолкнёт на правильные мысли, а ещё больше информации можно получить в Гугле по запросу "js lerp animation".

Comments

[Pit]

у меня же не canvans как мне для обычных картинок применить нужный мне эффект?

[Максим Морев]

Pit, а какая разница?
Они анимируют X и Y шарика, вам что мешает анимировать translate(Xpx, Ypx) у картинки аналогичным образом?

[Pit]

Максим Морев, у меня не хватает навыков в jquery

[Максим Морев]

Pit, плюсик за честность.

Держите: https://codepen.io/morevm/pen/YzXjeZQ
Ваши коэффициенты увеличил, чтобы было нагляднее.

[Pit]

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

[Максим Морев]

Pit, обработчик mousemove вешать не на документ, а на конкретные секции, а также инкапсулировать переменные, нужные для работы. Более подробно распинаться не буду - не поймёте, я боюсь, да и не платят мне за это :)
Без обид, просто это реально сложнее для восприятия, чем то, с чем уже возникли трудности.

Честно говоря, вообще не особо понимаю, зачем изобретать велосипед (разве что в целях обучения) - есть ведь замечательный parallax.js, который весит мало и реализует всё, что вам нужно и даже больше безо всяких костылей.

[Pit]

Максим Морев, я пробовал данный плагин но не смог настроить его так чтобы он анимировал на translate а не на position кароче тоже трудности с ним были

[Максим Морев]

Pit, очень странно, с учётом того, что этот плагин именно transform-свойствами и оперирует.
Так или иначе - сконфигурировать готовое хорошее решение проще, чем толково написать своё без достаточного опыта.