Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен
Эффект магнитной кнопки

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация позволит сделать магнитным кнопки. Она будет следовать за курсором.
Повысьте опыт использования любого Вашего проекта с помощью этой небольшой модификации.
Покажите пользователю, что на эту кнопку можно нажать.
Данная модификация будет работать только на десктопах.
Как это выглядит?
Данная модификация будет применяться только к тем кнопкам, которые добавлены через Zero Block.
Я следую за курсором
Как это добавить?
Первый шаг
Создаем блок T123 и добавляем в него скрипт. Если необходимо, чтобы модификация работала на всем сайте - разместите этот блок в футере.

<!--Взято с сайта https://digistudio.su/magnitnaya-knopka-->

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>

<script>
    if ($(window).width() > 768) {
       var magnetic = document.querySelectorAll('.magnetic');

magnetic.forEach(function(elem){
  $(document).on('mousemove touch', function(e){
    magnetize(elem, e);
  });
})
function magnetize(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;
  var deltaY = Math.floor((centerY - mY)) * -0.45;
  
  var distance = calculateDistance(item, mX, mY);
    
  if(distance < customDist){
    TweenMax.to(item, 0.5, {y: deltaY, x: deltaX, scale:1.1});
    item.addClass('magnet');
  }
  else {
    TweenMax.to(item, 0.6, {y: 0, x: 0, scale: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>
Второй шаг
В необходимом Zero Block'e задаем CSS класс magnetic необходимой кнопке.
Как Вам модификация?
Made on
Tilda