Как сделать тянущую анимации за курсором мышки без библеотек?
Как сделать тянущую анимации за курсором мышки без библеотек ?
Мне нужно примерно как здесь сделать https://www.madwell.com/
Когда мышка останавливается то анимация еще чуть доводиться до конца и тоже останавливается, чтобы не было рывков резких
Вам нужно использовать функцию линейной интерполяции (да, у нас в веб-анимации есть немного математики).
А также перестать использовать setInterval за этим делом, используйте requestAnimationFrame.
Вот вам статья, которая натолкнёт на правильные мысли, а ещё больше информации можно получить в Гугле по запросу "js lerp animation".
Максим Морев, круто получается, а не подскажешь последнее как сделать чтобы анимация была только в своей секции, у меня к примеру анимарованные круги в разных секциях, как мне сделать чтобы анимация была только в своей секции ?
Pit, обработчик mousemove вешать не на документ, а на конкретные секции, а также инкапсулировать переменные, нужные для работы. Более подробно распинаться не буду - не поймёте, я боюсь, да и не платят мне за это :)
Без обид, просто это реально сложнее для восприятия, чем то, с чем уже возникли трудности.
Честно говоря, вообще не особо понимаю, зачем изобретать велосипед (разве что в целях обучения) - есть ведь замечательный parallax.js, который весит мало и реализует всё, что вам нужно и даже больше безо всяких костылей.
Pit, очень странно, с учётом того, что этот плагин именно transform-свойствами и оперирует.
Так или иначе - сконфигурировать готовое хорошее решение проще, чем толково написать своё без достаточного опыта.
Простой
