Как сделать реагирование элементов на движение курсора мыши?

Question

[Иван Медведев]

Собственно вопрос в названии темы. Нужно сделать так, чтоб при проплывании курсора над анимированным объектом последний немного сдвигался в сторону курсора, а потом возвращался в исходное положение.

Вот сам объект:

Comments

[Максим]

в этом коде написано в values новые координаты...перепишите на свои через :

<svg class="hero-blob-1" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(300,300)">
    <path d="M120,-157.6C152.7,-141.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,173.1,148.1,184C105.8,195,52.9,171.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,173.3,-145.3,108,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-166.4,-75.1,-113.2,-78.8,-76.6,-93.6C-40,-108.3,-20,-134.2,11.9,-150.5C43.7,-166.8,87.4,-173.6,120,-157.6Z" fill="#0055fe" >
      <animate attributeName="d"
               dur="3s"
               values="M100,-107.6C142.7,41.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,123.1,148.1,184C165.8,125,52.9,131.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,103.3,-145.3,58,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-126.4,-75.1,-130.2,-30.8,-70.6,-90.6C-40,-68.3,-10,-184.2,11.9,-150.5C43.7,-186.8,87.4,-173.6,40,-107.6Z;
                       M120,-157.6C152.7,-141.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,173.1,148.1,184C105.8,195,52.9,171.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,173.3,-145.3,108,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-166.4,-75.1,-113.2,-78.8,-76.6,-93.6C-40,-108.3,-20,-134.2,11.9,-150.5C43.7,-166.8,87.4,-173.6,120,-157.6Z"
               repeatCount="indefinite"
               begin="mousemove"/>
    </path>
  </g>
</svg>

[Иван Медведев]

Максим Ленский, вообще не понял...

[Максим]

Иван Медведев, animate values видите?

[Иван Медведев]

Максим Ленский, вижу. Только не пойму, как это связать с поведением курсора?

[Максим]

Иван Медведев, наведение курсора это mousemove но что будет происходить при этом событие?

[Максим]

Иван Медведев, если просто сменить цвет хватит и hover а если делать изменение этого шейпа то нужен mousemove

[Иван Медведев]

Максим Ленский, я вижу, вы знаете, что говорите. А я в скрипте ни в зуб ногой. Что мне куда дописать, чтобы это сработало? Задача в том, чтобы объекты сдвигались при наведении курсора в сторону движения курсора.

[Максим]

Иван Медведев, это уже javascript нужен, увы я не возле компа

[Иван Медведев]

Максим Ленский, сможете помочь, будучи за компом?

[Максим]

Иван Медведев, смогу

[Иван Медведев]

Максим Ленский, буду благодарен!

Answer 1

[Александр]

Comments

[Иван Медведев]

Спасибо! Буду пробовать прикрутить к сайту.

[Иван Медведев]

Подключил ваш скрипт к сайту, добавил объекту класс box, но движение не происходит...

[Александр]

Иван Медведев, Давайте сайт.

[Иван Медведев]

Александр, https://mediol-git.github.io/ideo/

Репозиторий: https://github.com/mediol-git/ideo

[Александр]

Иван Медведев, Потому что на изображении анимация с блокированием трансформации. Оберните картинку в другой блок и дайте ему класс box, или другой, только в скрипте поменяйте.

[Иван Медведев]

Александр, получилось! Спасибо большое! Подскажите, как уменьшить смещение картинки? Также, изображение теряет свой z-index при наведении. При попытке добавить классу box position:absolute изображение и вовсе пропадает.

[Александр]

Иван Медведев, Смещение при движении мыши задается тут

item.velocity.x += (item.mouse.current.x - item.mouse.previous.x) / 25;
item.velocity.y += (item.mouse.current.y - item.mouse.previous.y) / 25;

Если хотите медленнее - то увеличьте число (25 которое). Скорость возврата тут

[item.velocity.x, item.velocity.y] = [item.position.x / -10, item.position.y / -10];

Чем больше число - тем медленнее (обязательно отрицательное!). Пока это обновите на сайте, чуть позже и про z-index отвечу.

[Иван Медведев]

Александр, понял. Спасибо!

[Александр]

Иван Медведев, Так, по поводу z-index. Картинку "Давида" оборачиваете так

<div class="img-wrapper david">
    <img src="img/David.png" alt="Давид" class="wow fadeInUp faster">
</div>

Меняете стили header .hero-img img на

header .hero-img img,
header .hero-img .img-wrapper {
  position: absolute;
  max-width: 100%;
}

header .hero-img .img-wrapper img {
  position: static;
}

Для скрипта селектор меняете на .img-wrapper

const boxes = document.querySelectorAll('.img-wrapper');

Еще для body неплохо бы overflow-x: hidden;. Нынче популярная точка, летающая за курсором, расширяет контейнер и появляется горизонтальный скролл.

[Иван Медведев]

Александр, благодарю! Все по делу!!! Про оверфлоу для боди я знал, да не успел использовать)

Answer 2

[ThunderCat]

онховер.