В современном мире интернета и технологий, где каждый день появляются новые сайты на тильде, очень важно выделиться среди конкурентов. Клиенты часто обращаются с просьбой сделать их сайт уникальным и запоминающимся. Один из способов добиться этого — использование эффекта магнитной кнопки. Этот элемент дизайна притягивает внимание пользователей и делает сайт более живым и интересным. Благодаря этому сайты становятся более привлекательными для посетителей и выделяются среди конкурентов.
Инструкция:
- Создайте зеро-блок с элементом кнопка
- Добавьте класс .magnet к элементу кнопка (Инструкция как добавить класс к элементу)
- Создайте блок Т123 и вставьте код из примера
- Обновите страницу
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
<script>
$(document).ready(function(){
if ($(window).width() > 768) {
$('.magnet').each(function(){
$(this).data('dist', 20); // Радиус эффекта
$(document).on('mousemove touch', {el: this}, function(e){
magnetize(e.data.el, e);
});
});
}
});
function magnetize(el, e){
var mX = e.pageX,
mY = e.pageY;
var item = $(el);
var dist = item.data('dist') * 20 || 120;
var centerX = item.offset().left + (item.width()/2);
var centerY = item.offset().top + (item.height()/2);
var deltaX = (centerX - mX) * -0.45;
var deltaY = (centerY - mY) * -0.45;
var distance = calculateDistance(item, mX, mY);
if(distance < dist){
TweenMax.to(item, 0.5, {y: deltaY, x: deltaX, scale:1.1, ease: Power2.easeOut});
item.addClass('magnet');
} else {
TweenMax.to(item, 0.6, {y: 0, x: 0, scale:1, ease: Power2.easeOut});
item.removeClass('magnet');
}
}
function calculateDistance(elem, mouseX, mouseY) {
return Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2));
}
</script>