Магнитная кнопка

Магнитная кнопка

Модификация позволяет сделать магнитным любой объект. При наведении он будет притягиваться к курсору мыши

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
39307869
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В Zero-блоке создаём необходимый объект и вешаем на него класс magnetic
Шаг 1
Ниже создаем блок T123 и добавляем код в него
Шаг 2
<!--Магнитная кнопка-->
<!--https://mt-webdesign.ru/magneticbutton-->
<script src='https://matilda-design.ru/library/tween.js'></script>
<script>
if ($(window).width() > 768) { // 768 - выставляем разрешение, на котором начнет работать скрипт
var magnetic = document.querySelectorAll('.magnetic');
magnetic.forEach(function(elem){
$(document).on('mousemove touch', function(e){
magneticobj(elem, e);
});
})
function magneticobj(el, e) {
var mX = e.pageX,
mY = e.pageY;
const item = $(el);
const customDist = item.data('dist') * 20 || 120;
const centerX = item.offset().left + (item.width()/2);
const centerY = item.offset().top + (item.height()/2);
var deltaX = Math.floor((centerX - mX)) * -0.45; // -0.45 - область притягивания, чем выше значение, тем больше площадь взаимодействия (ось X)
var deltaY = Math.floor((centerY - mY)) * -0.45; // -0.45 - область притягивания, чем выше значение, тем больше площадь взаимодействия (ось Y)
var distance = calculateDistance(item, mX, mY);
if(distance < customDist){
TweenMax.to(item, 0.5, {y: deltaY, x: deltaX, scale:1}); // 0.5 - скорость притягивания, чем выше значение, тем плавнее; scale:1 - увеличение объекта по наведению (1.1 - пример)
item.addClass('magnet');
}
else {
TweenMax.to(item, 0.5, {y: 0, x: 0, scale:1}); // 0.5 - скорость притягивания, чем выше значение, тем плавнее; scale:1 - увеличение объекта по наведению (1.1 - пример)
item.removeClass('magnet');
}
}
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
}
</script>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
3D галерея
Tilda
Подсказки при наведении курсора
Tilda