Модификация этого кода позволяет создать эффект магнита для любого объекта на веб-странице. Когда пользователь наводит курсор мыши на объект, он начинает притягиваться к курсору, создавая эффект притяжения.
Как подключить:
- Добавить блок Т123 на страницу.
- Добавить класс magnetic к элементу который должен притягиваться к курсору
- Опубликуйте страницу!
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js'></script>
<script>
if (window.innerWidth > 768) {
var magneticElements = document.querySelectorAll('.magnetic');
magneticElements.forEach(function (elem) {
document.addEventListener('mousemove', function (e) {
magnetize(elem, e);
});
document.addEventListener('touchmove', function (e) {
magnetize(elem, e.touches[0]);
});
});
function magnetize(el, e) {
var mX = e.pageX || e.clientX,
mY = e.pageY || e.clientY;
var item = $(el);
var customDist = item.data('dist') * 20 || 100;
var centerX = item.offset().left + item.width() / 2;
var centerY = item.offset().top + item.height() / 2;
var deltaX = Math.floor((centerX - mX)) * -0.45;
var deltaY = Math.floor((centerY - mY)) * -0.45;
var distance = calculateDistance(item, mX, mY);
if (distance < customDist) {
gsap.to(item, 0.5, { y: deltaY, x: deltaX, scale: 1.1 });
item.addClass('magnet');
} else {
gsap.to(item, 0.6, { y: 0, x: 0, scale: 1 });
item.removeClass('magnet');
}
}
function calculateDistance(elem, mouseX, mouseY) {
var elemOffset = elem.offset();
var elemWidth = elem.width();
var elemHeight = elem.height();
var centerX = elemOffset.left + elemWidth / 2;
var centerY = elemOffset.top + elemHeight / 2;
return Math.floor(Math.sqrt(Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2)));
}
}
</script>
