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

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

AW-Flow — Fade Up

Кнопки, карточки и изображения проявляются из прозрачности со смещением с любой стороны.

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

Готовый код

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

класс: awf-fade-up2,1 КБ · HTML + CSS + JS
<!-- AW-Flow — Fade Up · класс элемента: awf-fade-up -->
<style>
.awf-fade-up {
  --awf-distance: 40px;
  --awf-duration: 800ms;
  --awf-delay: 0ms;
  --awf-ease: cubic-bezier(0.33, 1, 0.68, 1);
}
.awf-fade-up {
  opacity: 0;
  transform: translate3d(calc(var(--awf-distance) * 0), calc(var(--awf-distance) * 1), 0);
  transition: opacity var(--awf-duration) var(--awf-ease) var(--awf-delay),
    transform var(--awf-duration) var(--awf-ease) var(--awf-delay);
}
.awf-fade-up.awf-in { opacity: 1; transform: none; }
.awf-fade-up.awf-off,
.awf-fade-up.awf-off * { transition: none !important; }
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-fade-up { opacity: 1; transform: none; transition: none; }
}
</style>
<script>
(function () {
  var CLS = 'awf-fade-up';
  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-fade-up — без точки. Класс ставится на сам элемент, не на весь артборд.
  2. Добавьте HTML-блок. На этой же странице добавьте блок T123 «HTML-код» (проще всего найти поиском в библиотеке блоков) или элемент HTML внутри Zero Block.
  3. Вставьте код. Скопируйте код целиком и вставьте в этот HTML-блок, сохраните и опубликуйте страницу.
  4. Меняете настройки? Сначала удалите старый код этого эффекта, затем вставьте новый и снова опубликуйте страницу.
  5. Разные настройки — разные классы. Для второго варианта на той же странице задайте в конструкторе другой класс, например awf-fade-up-2, и вставьте его код отдельно.
Ещё в разделе «Объекты»Весь каталог