+38(063) 178 64 56
Works
Agency
Services
Price
Contacts
digital agency
Articles
Плавный скролл
Значения, которые были введены
1. Прежде чем приступить к настройке данной модификации необходимо загрузить желаемое изображение в Зеро-блок через элемент image или shape. И указываешь ему тот же class, что и в генераторе (например, imagerotation). Класс нужно прописать для каждого элемента, к которому будет применяться увеличение.

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

2. В генераторе заполняешь поля:
  • «Класс» — указываешь класс элемента, к которым будет применяться эффект увеличения (например, imagerotation);
  • «Увеличение контейнера (%)» — указываешь необходимый размер увеличения контейнера;
  • «Увеличение изображения (%)» — указываешь необходимый размер увеличения изображения;
  • «Скорость (ms)» — скорость анимации;
  • «Угол поворота при наведении на изображения» — это поле настраивает поворот внутри контейнера;
  • «Угол поворота при наведении на контейнер» — это поле настраивает поворот всего контейнера;
  • «Изменить z-index при наведении» — это поле необходимо заполнять в случае, если в блоке находится несколько элементов, которые наслаиваются друг на друга (или будут наслаиваться в случае проигрывания анимации). Чем выше этот параметр тем выше будет находиться элемент по отношению к другим элементам внутри Зеро блока, во время применения эффекта увеличения;
  • «Тип анимации» — выбери понравившеюся анимацию из предложенного списка.
Дополнительно, можешь
  • «Включить границы (overflow)»;
  • «Отключить эффект на экранах меньше 1200px»;

3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;

Имей в виду:

  • Если настраиваешь дополнительно увеличение через sbs анимацию, увеличение не подействует и будет оставаться в рамках границ изображения при включенной настройке «Включить границы (overflow)»
Як на картинке
<!--NOLIM--><!--NLM098--><!--settings{"class":"imageRotation","resize_elem":"100","resize":"115","speed":"200","angle":"4","angle_elem":"0","zindex":"999","selectAnimType":"-1","overflow":"1","mediawidth":"1"}settingsend--><!--ts1741793716093ts--> <style> @media screen and (min-width: 1200px) { .t396 .imageRotation .tn-atom{ transition: transform 200ms linear!important; } .t396 .imageRotation{ transition: transform 200ms linear!important; } .t396 .imageRotation:hover{ transform: scale(100%) rotate(0deg)!important; } .t396 .imageRotation:hover .tn-atom{ transform: scale(115%) rotate(4deg)!important; } .t396 .imageRotation:hover { z-index: 999!important; } .t396 .imageRotation .tn-atom{ transition:transform 200ms cubic-bezier()!important; } .t396 .imageRotation{ transition:transform 200ms cubic-bezier()!important; } .t396 .imageRotation:hover{ animation:scale- 200ms linear!important; transform: scale(100%) rotate(0deg)!important; } .t396 .imageRotation:hover .tn-atom{ animation:scale- 200ms linear!important; transform: scale(115%) rotate(4deg)!important; } } </style> <script> (function(){ function n_ready(t) { "loading" != document.readyState ? t() : document.addEventListener ? document.addEventListener("DOMContentLoaded", t) : document.attachEvent("onreadystatechange", function() { "loading" != document.readyState && t() }) } n_ready(function(){ let a = setInterval(function(){ let elem = document.querySelectorAll('.imageRotation'); let elem_atom = document.querySelectorAll('.imageRotation .tn-atom'); if(elem.length == elem_atom.length){ clearInterval(a); elem.forEach(function(el) { el.style.overflow = "hidden"; let br = el.querySelector('.tn-atom'); br = window.getComputedStyle(br); let borderRadius = br.borderRadius; let borderWidth = br.borderWidth; let borderColor = br.borderColor; let borderStyle = br.borderStyle; let boxShadow = br.boxShadow; el.style.borderRadius = borderRadius; el.style.borderWidth = borderWidth; el.style.borderColor = borderColor; el.style.borderStyle = borderStyle; el.style.boxShadow = boxShadow; el.querySelector('.tn-atom').style.borderWidth = "0px"; el.querySelector('.tn-atom').style.boxShadow = "unset"; let b = setInterval(function() { if ((window.isFirefox || window.isOpera) && el.querySelector(".tn-atom__scale-wrapper")) { el.querySelector(".tn-atom__scale-wrapper").style.overflow = "hidden"; el.style.overflow = "auto"; let myZoom = el.querySelector(".tn-atom__scale-wrapper").style.transform.replace(/[^0-9,.]/g,""); if (myZoom != "1") { clearInterval(b); el.querySelector(".tn-atom__scale-wrapper").style.borderWidth = borderWidth.replace("px", "") * myZoom + "px"; el.querySelector(".tn-atom__scale-wrapper").style.borderRadius = borderRadius; el.querySelector(".tn-atom__scale-wrapper").style.borderColor = borderColor; el.querySelector(".tn-atom__scale-wrapper").style.borderStyle = borderStyle; } } else { let myZoom = window.getComputedStyle(el).zoom; if (myZoom != "1") { clearInterval(b); el.style.borderWidth = borderWidth.replace("px", "") * myZoom * myZoom + "px"; } } }, 10); }); } },500); }); })(); </script>