URL скопирован в буфер обмена!

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

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

Модификация не работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode

Генератор кода

Класс для кнопки
Радиус зоны магнита
Градус поворота
Увеличение кнопки
Отслеживание положения курсора
Скорость анимации
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD049--><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script> var isDesktop = window.innerWidth > 960; if (isDesktop) { (function() { var TiCodeMag = document.querySelectorAll('.ti-magnet'); var TiCodeRotate = true; TiCodeMag.forEach(function(elem) { document.addEventListener('mousemove', function(e) { TiMagnetize(elem, e); }); }); function TiMagnetize(el, e) { var mX = e.pageX, mY = e.pageY; const item = $(el); const customDist = 200; const centerX = item.offset().left + (item.width() / 2); const centerY = item.offset().top + (item.height() / 2); var deltaX = Math.floor((centerX - mX)) * -1; var deltaY = Math.floor((centerY - mY)) * -1; var distance = TiCalculateDistance(centerX, centerY, mX, mY); var rotation = 0; if (TiCodeRotate) { if (mX < centerX) { rotation = 25; } else { rotation = -25; } } else { rotation = 25; } if (distance < customDist) { gsap.to(item, 1, { y: deltaY, x: deltaX, scale: 1, rotation: rotation }); item.addClass('magnet'); } else { gsap.to(item, 0.6, { y: 0, x: 0, scale: 1, rotation: 0 }); item.removeClass('magnet'); } } function TiCalculateDistance(centerX, centerY, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2))); } function TiLerp(a, b, n) { return (1 - n) * a + n * b; } class TiCursor { constructor() { this.bind(); this.cursor = document.querySelector('.js-cursor'); this.mouseCurrent = { x: 0, y: 0 }; this.mouseLast = { x: this.mouseCurrent.x, y: this.mouseCurrent.y }; this.rAF = undefined; } bind() { ['getMousePosition', 'run'].forEach((fn) => this[fn] = this[fn].bind(this)); } getMousePosition(e) { this.mouseCurrent = { x: e.clientX, y: e.clientY }; } run() { this.mouseLast.x = TiLerp(this.mouseLast.x, this.mouseCurrent.x, 0.2); this.mouseLast.y = TiLerp(this.mouseLast.y, this.mouseCurrent.y, 0.2); this.mouseLast.x = Math.floor(this.mouseLast.x * 100) / 100; this.mouseLast.y = Math.floor(this.mouseLast.y * 100) / 100; this.cursor.style.transform = `translate3d(${this.mouseLast.x}px, ${this.mouseLast.y}px, 0)`; this.rAF = requestAnimationFrame(this.run); } requestAnimationFrame() { this.rAF = requestAnimationFrame(this.run); } addEvents() { window.addEventListener('mousemove', this.getMousePosition, false); } on() { this.addEvents(); this.requestAnimationFrame(); } init() { this.on(); } } const tiCursor = new TiCursor(); tiCursor.init(); })(); } </script>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block кнопку и назначаем ей класс ti-magnet
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

2. При необходимости указываем дополнительные настройки в генераторе кода:
Радиус зоны магнита - указываем радиус в пределах которого будет работать анимация магнита.
Градус поворота - указываем радиус поворота кнопки от 0 до 180. Можно указывать минусовое значение если нужно чтобы кнопка примагничивалась другим углом. Например -25.
Увеличение кнопки - указываем процент увеличения кнопки при наведении.
Отслеживание положения курсора - при включённой настройке, будет отслеживаться курсор относительно центра кнопки. Если курсор слева от кнопки, то кнопка поворачивается левым углом, если курсор справа, то кнопка поворачивается правым углом. Сравнить можно в примере модификации.
Скорость анимации - указываем время анимации в секундах. Рекомендуем указывать в пределах от 1 до 3. Можно указывать значение формата 1.5

4. Копируем готовый код и вставляем в HTML блок Т123. Блок с кодмо должен быть расположен после блока с кнопкой.

Примечание! При создании несколько кнопок с одинаковыми настройками, достаточно всем кнопкам назначить один класс и сгенерировать всего один код. Если у кнопок должны быть разные настройки(например разная скорость анимации), то генерируем несколько кодов и обязательно указываем уникальные классы в генераторе и кнопках.
КНОПКА 1
КНОПКА 2
Кнопка с отслеживанием курсора, поворотом на -25 и увеличением на 10%
Кнопка без отслеживания курсора, поворотом на -25 и увеличением на 10%
Made on
Tilda