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

Объекты · Появлениеfx/13

AW-Flow — 3D Tilt In

Объект поднимается и разворачивается из наклона назад в плоскость — объём без 3D-графики.

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

Готовый код

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

класс: awf-tilt-in2,2 КБ · HTML + CSS + JS
<!-- AW-Flow — 3D Tilt In · класс элемента: awf-tilt-in -->
<style>
.awf-tilt-in {
  --awf-angle: 35deg;
  --awf-perspective: 1200px;
  --awf-distance: 60px;
  --awf-duration: 1000ms;
  --awf-delay: 0ms;
  --awf-ease: cubic-bezier(0.33, 1, 0.68, 1);
}
.awf-tilt-in {
  opacity: 0;
  transform: perspective(var(--awf-perspective)) translate3d(0, var(--awf-distance), 0) rotateX(var(--awf-angle));
  transform-origin: 50% 100%;
  transition: opacity calc(var(--awf-duration) * 0.6) linear var(--awf-delay),
    transform var(--awf-duration) var(--awf-ease) var(--awf-delay);
}
.awf-tilt-in.awf-in {
  opacity: 1;
  transform: perspective(var(--awf-perspective)) translate3d(0, 0, 0) rotateX(0deg);
}
.awf-tilt-in.awf-off,
.awf-tilt-in.awf-off * { transition: none !important; }
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-tilt-in { opacity: 1; transform: none; transition: none; }
}
</style>
<script>
(function () {
  var CLS = 'awf-tilt-in';
  var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
  function prepare(el) { }
  function play(el) {
    el.classList.add('awf-in');
  }
  function stop(el) {
    // мгновенный сброс в начальное состояние, без обратной анимации
    el.classList.add('awf-off');
    el.classList.remove('awf-in');
    void el.offsetWidth;
    el.classList.remove('awf-off');
  }
  function init() {
    var els = [].slice.call(document.querySelectorAll('.' + CLS)).filter(function (el) {
      if (el.getAttribute('data-awf')) return false;
      el.setAttribute('data-awf', '1');
      prepare(el);
      el.classList.add('awf-ready');
      return true;
    });
    if (reduce) { els.forEach(play); return; }
    if (!('IntersectionObserver' in window)) { els.forEach(play); return; }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (e.isIntersecting) { play(e.target); io.unobserve(e.target); }
      });
    }, { threshold: 0.2 });
    els.forEach(function (el) { io.observe(el); });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>

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

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

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

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