Заказать эффект

Объекты · Ховерfx/14

AW-Flow — Hover Tilt

Карточка наклоняется вслед за курсором и ловит блик. На тач-устройствах отключается сама.

Запуск
по наведению
Параметров
8
Телефоны
свои настройки
Код
HTML-блок
.awf-hover-tilt

Готовый код

Это тот же код, что сейчас работает в превью: значения подставлены из конструктора, внешние библиотеки не нужны.

класс: awf-hover-tilt2,7 КБ · HTML + CSS + JS
<!-- AW-Flow — Hover Tilt · класс элемента: awf-hover-tilt -->
<style>
.awf-hover-tilt {
  --awf-angle: 10deg;
  --awf-scale: 1.03;
  --awf-perspective: 1000px;
  --awf-duration: 400ms;
  --awf-glare-strength: 0.35;
  --awf-ease: cubic-bezier(0.33, 1, 0.68, 1);
}
.awf-hover-tilt {
  transition: transform var(--awf-duration) var(--awf-ease);
}
.awf-hover-tilt .awf-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
</style>
<script>
(function () {
  var CLS = 'awf-hover-tilt';
  var fine = window.matchMedia && matchMedia('(hover: hover) and (pointer: fine)').matches;
  var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
  function num(el, name) { return parseFloat(getComputedStyle(el).getPropertyValue(name)) || 0; }
  function init() {
    if (!fine || reduce) return; // на тач-экранах и при «уменьшении движения» эффект выключен
    [].forEach.call(document.querySelectorAll('.' + CLS), function (el) {
      if (el.getAttribute('data-awf')) return;
      el.setAttribute('data-awf', '1');
      var glare = null;
      glare = document.createElement('span');
      glare.className = 'awf-glare';
      el.appendChild(glare);
      el.addEventListener('pointermove', function (e) {
        var r = el.getBoundingClientRect();
        var x = (e.clientX - r.left) / r.width, y = (e.clientY - r.top) / r.height;
        var a = num(el, '--awf-angle'), s = num(el, '--awf-scale') || 1, p = num(el, '--awf-perspective') || 1000;
        el.style.transform = 'perspective(' + p + 'px) rotateX(' + ((0.5 - y) * 2 * a).toFixed(2) + 'deg) rotateY(' + ((x - 0.5) * 2 * a).toFixed(2) + 'deg) scale(' + s + ')';
        if (glare) {
          glare.style.opacity = 1;
          glare.style.background = 'radial-gradient(circle at ' + (x * 100).toFixed(1) + '% ' + (y * 100).toFixed(1) + '%, rgba(255,255,255,' + num(el, '--awf-glare-strength') + '), transparent 60%)';
        }
      });
      // will-change — только пока курсор над элементом
      var over = false;
      el.addEventListener('pointerenter', function () { over = true; el.style.willChange = 'transform'; });
      el.addEventListener('pointerleave', function () {
        over = false;
        el.style.transform = '';
        if (glare) glare.style.opacity = 0;
        setTimeout(function () { if (!over) el.style.willChange = ''; }, num(el, '--awf-duration') + 50);
      });
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>

Вставляется в HTML-блок на той же странице, где элемент с классом.

Как добавить в Tilda

Эффект работает на опубликованной странице и в режиме предпросмотра — в самом редакторе Tilda скрипты не выполняются.

  1. Назначьте класс элементу. В Zero Block кликните правой кнопкой по нужному элементу и выберите пункт добавления CSS-класса (Add CSS class name). Впишите awf-hover-tilt — без точки. Класс ставится на сам элемент, не на весь артборд.
  2. Добавьте HTML-блок. На этой же странице добавьте блок T123 «HTML-код» (проще всего найти поиском в библиотеке блоков) или элемент HTML внутри Zero Block.
  3. Вставьте код. Скопируйте код целиком и вставьте в этот HTML-блок, сохраните и опубликуйте страницу.
  4. Меняете настройки? Сначала удалите старый код этого эффекта, затем вставьте новый и снова опубликуйте страницу.
  5. Разные настройки — разные классы. Для второго варианта на той же странице задайте в конструкторе другой класс, например awf-hover-tilt-2, и вставьте его код отдельно.
Ещё в разделе «Объекты»Весь каталог