Как повторить эффект вращения при наведении на блок?

Добрый день всем.
Хочу повторить эффект вращения градиента или фона с градиентом как на сайте https://vintage.com.ua/services
при наведении на надпись "Давайте обсуждать".
Вращение градиента сделал, но не могу сообразить как сделать плавное затухание вращения и чтоб, фон продолжал вращаться в ту сторону в которую двигалась мышка.
Мои мучения здесь:
https://codepen.io/Odiseu/pen/dyYxxZO
  • Вопрос задан
  • 193 просмотра
Решения вопроса 1
@Odiseu Автор вопроса
Кому интересно. Выкладываю ответ на вопрос.
https://jsfiddle.net/Dmytriy_od/xz801v34/3/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега JavaScript
У тебя сейчас происходит моментальная отрисовка позиции градиента при движении мышки. А тебе надо сделать так, чтоб градиент отрисовывался постепенно, стремясь к нужной позиции. То есть ты водишь мышкой, а градиент догоняет. Обычно это делают в requestAnimationFrame, ты можешь ручками написать некоторую функцию, которая будет постепенно менять позицию на N, прибавляя значение к текущей. Но можешь воспользоваться открытой библиотекой для подобных вещей Anime.js.

Придется посмотреть и разбираться, никто не говорил что будет легко.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы