Изменение положения div с помощью translate3d в соответствии с движением мыши

#jquery #html #css #mousemove

#jquery #HTML #css #перемещение мыши

Вопрос:

Я хотел бы добиться эффекта изменения положения subtil div с помощью css transform translate3d в соответствии с движением мыши. Что-то вроде геометрических фигур домашнего раздела этого веб-сайта: http://riccardozanutta.com /

Я пробовал это:

 $(window).mousemove(function(event) {
  $(".home-img").css({"left" : event.pageX, "top" : event.pageY});
});

с одним изображением, расположенным в абсолютном положении, и это сработало (изображение меняло положение в соответствии с движением мыши), однако, когда я пытаюсь анимировать 3 divs с помощью class .basic-skill

 $(window).mousemove(function(event) {
  $(".basic-skill").css({"left" : event.pageX, "top" : event.pageY});
});

они выходят за пределы порта просмотра (когда они расположены относительно) или перекрывают друг друга (когда они расположены абсолютно).

Более того, я не знаю, как ограничить перемещение максимум до 5 пикселей вместо того, чтобы заставлять его перемещаться по всему порту просмотра.

Большое спасибо за ваше руководство!

Ответ №1:

Решая ваш вопрос для максимального смещения в 5 пикселей, вы можете умножить координаты X и Y на коэффициент, подобный 0,1, чтобы уменьшить количество перемещений. Вот так:

 $(".basic-skill").css({"left" : event.pageX * 0.1, "top" : event.pageY * 0.1});

РЕДАКТИРОВАТЬ: вместо использования top and left вы можете использовать margin-top and margin-left со статическим top left значением and в CSS. JSFiddle

CSS

 position: absolute;
top: 50px;
left: 50px;

 $("#two").css({"margin-left" : -(event.pageX * 0.1), "margin-top" : -(event.pageY * 0.1)});

ПРАВКА 2: улучшенная скрипка: https://jsfiddle.net/qcoy5xpg/2 /

Но это всего лишь быстрый и простой способ. На демонстрационной странице, которую вы предоставили, он использовал CSS-анимацию для элементов SVG. Вот почему это кажется элегантным, если позволите (послабления)