Как сделать магнитную кнопку в Tilda

Модификация позволяет сделать эффект притягивания элементов к курсору мыши при наведении в сайте на Тильде

Пример использования

Эффект примагничивания работает только на десктопной версии сайта, так как в мобильных устройствах нет эффекта наведения.

Я магнитная кнопка

Инструкция

1

В zero block создаем кнопку, шэйп, изображение или текст, к которым нужно применить эффект и задаём им класс .magnetizm

2

Создаём блок T123 и вставляем в него код, расположенный ниже.

3

Сохраните изменения и опубликуте страницу.


<!-- https://mkotelnikov.ru/script/magnetizm-button -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>

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

    magnetizm.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>

1

Для того, чтобы сделать эффект примагничивания кнопки при наведении в стандартном блоке Тильды, вставьте код ниже в блок T123 и замените в нём класс кнопки

2

В коде нужно заменить класс кнопки на нужный нам класс. В примере вставлен класс кнопки блока CR09. Классы кнопок в разных блоках можно посмотреть в таблице ниже

3

Сохраните изменения и опубликуте страницу.


<!-- https://mkotelnikov.ru/script/magnetizm-button -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>

<script>
//Вместо класса .t995__btn-wrapper вставить класс кнопки из нужного блока
    $('.t995__btn-wrapper').addClass('magnetizm');
if ($(window).width() > 768) {
   var magnetizm = document.querySelectorAll('.magnetizm');

    magnetizm.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>

1

Если нужно применить эффект примагничиваниядля всех кнопок на сайте, то используйте этот код. Разместите его в header или footer сайта

2

Сохраните изменения и опубликуте все страницы сайта.


<!-- https://mkotelnikov.ru/script/magnetizm-button -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>

<script>
if ($(window).width() > 768) {
   var magnetizm = document.querySelectorAll('.t-btn, [data-elem-type=button], .t-submit');

    magnetizm.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>

150 ₽

300 ₽

50 ₽

Как сделать магнитную кнопку в Tilda

Пример использования

Инструкция

Было полезно?

Можете отблагодарить за модификацию. Это даёт стимул дальше собирать полезный контент.