Магнитный элемент
Значения, которые были введены
1. Добавляешь в Зеро-блок элемент (текст, шейп, картинка или кнопка). И указываешь ему тот же класс, что и в генераторе (например, magnit).

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь класс.

2. В генераторе заполняешь следующие поля:
  • «Класс элемента» – прописываешь класс, тот же, что и у элемента в Зеро-блоке, к которому будет применяться эффект магнитной кнопки (например, magnit);
  • «На каком расстоянии от центра элемента магнитить(px)» – радиус в пределах которого элемент замечает курсор и магнититься к нему;
  • «Увеличение элемента» – на сколько будет увеличиваться элемент во время применения эффекта;
  • «Скорость эффекта»;
  • «Угол вращения во время эффекта (deg)» – угол поворота элемента во время применения эффекта (может быть отрицательным)

  • 3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
Як на картинке
<!--NOLIM--><!--NLM097--><!--settings{"elemClass":"magnit1","dist":"200","scaleIncrease":"1.1","effectSpeed":"0.5","rotationAngle":"5"}settingsend--><!--ts1741789297411ts--> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script> <script> function n_ready(t) { if ("loading" != document.readyState) { t(); } else { document.addEventListener ? document.addEventListener("DOMContentLoaded", t) : document.attachEvent("onreadystatechange", function() { if ("loading" != document.readyState) { t(); } }); } } function magnetize(el, e){ function checkZoom(el) { let myZoom = 1; if (window.isFirefox || window.isOpera) { let scaleWrapper = el.querySelector(".tn-atom__scale-wrapper"); if (scaleWrapper) { myZoom = scaleWrapper.style.transform.replace(/[^0-9,.]/g,""); let int2 = setInterval(function() { scaleWrapper = el.querySelector(".tn-atom__scale-wrapper"); let z1 = scaleWrapper.style.transform.replace(/[^0-9,.]/g,""); if (z1 != myZoom) { myZoom = scaleWrapper.style.transform.replace(/[^0-9,.]/g,""); } }, 100); } } else { if (el.style.zoom != "") { myZoom = el.style.zoom; let int2 = setInterval(function() { let z1 = el.style.zoom; if (z1 != myZoom) { myZoom = el.style.zoom; } }, 10); } } return myZoom; } let myZoom = checkZoom(el.closest(".tn-elem")); let mX = e.clientX, mY = e.clientY; let item = el; let customDist = 200 * myZoom; let rect = item.getBoundingClientRect(); 	 		let top = rect.top * myZoom, bottom = (rect.top + rect.height) * myZoom, left = rect.left * myZoom, right = (rect.left + rect.width) * myZoom; if (mX >= left - customDist && mX <= right + customDist && mY >= top - customDist && mY <= bottom + customDist) { let deltaX = Math.floor((rect.left * myZoom + rect.width * myZoom / 2 - mX)) * -0.45; let deltaY = Math.floor((rect.top * myZoom + rect.height * myZoom / 2 - mY)) * -0.45; TweenMax.to(item, 0.5, {y: deltaY, x: deltaX, scale:1.1, rotation: 5}); item.classList.add('magnet'); } else { TweenMax.to(item, 0.5, {y: 0, x: 0, scale:1, rotation: 0}); item.classList.remove('magnet'); } } n_ready(function(){ 		let checkExist = setInterval(function() { 			let magnetizm = document.querySelectorAll('.magnit1 .tn-atom'); 			if (magnetizm.length > 0) { 				clearInterval(checkExist); 				if (window.innerWidth > 768) { 					magnetizm.forEach(function(elem){ 						document.addEventListener('mousemove', function(e){ 							magnetize(elem, e); 						}); 					}); document.addEventListener('mouseleave', function(e) { 						magnetizm.forEach(function(elem) { 					 TweenMax.to(elem, 0.5, {y: 0, x: 0, scale:1, rotation: 0}); elem.classList.remove('magnet'); 						}); 					}); 				} 			} 		}, 500); 		setTimeout(function() { 			clearInterval(checkExist); 		}, 10000); 	}); </script>