Магнитная кнопка в Тильде (Зеро-блок)

В современном мире интернета и технологий, где каждый день появляются новые сайты на тильде, очень важно выделиться среди конкурентов. Клиенты часто обращаются с просьбой сделать их сайт уникальным и запоминающимся. Один из способов добиться этого — использование эффекта магнитной кнопки. Этот элемент дизайна притягивает внимание пользователей и делает сайт более живым и интересным. Благодаря этому сайты становятся более привлекательными для посетителей и выделяются среди конкурентов.

Инструкция:

Создайте зеро-блок с элементом кнопка
Добавьте класс .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>