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

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

AW-Flow — Scale In

Объект вырастает из меньшего масштаба с пружинкой в конце — хорошо для кнопок и иконок.

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

Готовый код

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

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