Меню

Прелоадер
штора

Уроки по Тильде
В этом видео я расскажу, как можно создать свой прелоадер с анимацией шторы
Описание
Материал из видео
В Zero блоке создаем 20 шейпов размерами 5%x100%, заполняем ими всю область экрана и вешаем на них класс preloader-shape
Шаг 1
На Zero блок вешаем класс uc-preloader
Шаг 2
Ниже создаём блок T123 и добавляем код
Шаг 3
<!--Прелоадер-->

<style>
    .uc-preloader .t396__artboard {
        z-index:9999;
        position: fixed;
        top:0;
    }
    .t-body {
        overflow: hidden !important;
}
    .overflow {
        overflow: overlay !important;
    }
    .hide {
        display:none;
    }
    .preloader-shape {
        overflow: hidden;
    }
    .preloader-shape .tn-atom {
        animation-direction: normal;
        animation: transform-block 0.5s cubic-bezier(0.98, 0.12, 0.18, 1.03);
        animation-fill-mode: forwards;
    }
    .preloader-shape:nth-child(3) .tn-atom  {
       animation-delay: 1.9s;
   }
    .preloader-shape:nth-child(4) .tn-atom  {
       animation-delay: 1.95s;
   }
    .preloader-shape:nth-child(5) .tn-atom  {
       animation-delay: 2s;
   }
   
   .preloader-shape:nth-child(6) .tn-atom {
       animation-delay: 2.05s;
   }
   .preloader-shape:nth-child(7) .tn-atom  {
       animation-delay: 2.1s;
   }
    .preloader-shape:nth-child(8) .tn-atom  {
       animation-delay: 2.15s;
   }
       .preloader-shape:nth-child(9) .tn-atom  {
       animation-delay: 2.2s;
   }
    .preloader-shape:nth-child(10) .tn-atom  {
       animation-delay: 2.25s;
   }
   
   .preloader-shape:nth-child(11) .tn-atom {
       animation-delay: 2.3s;
   }
   .preloader-shape:nth-child(12) .tn-atom  {
       animation-delay: 2.35s;
   }
    .preloader-shape:nth-child(13) .tn-atom  {
       animation-delay: 2.4s;
   }
       .preloader-shape:nth-child(14) .tn-atom  {
       animation-delay: 2.45s;
   }
    .preloader-shape:nth-child(15) .tn-atom  {
       animation-delay: 2.5s;
   }
   .preloader-shape:nth-child(16) .tn-atom {
       animation-delay: 2.55s;
   }
   .preloader-shape:nth-child(17) .tn-atom  {
       animation-delay: 2.6s;
   }
    .preloader-shape:nth-child(18) .tn-atom  {
       animation-delay: 2.65s;
   }
       .preloader-shape:nth-child(19) .tn-atom  {
       animation-delay: 2.7s;
   }
    .preloader-shape:nth-child(20) .tn-atom  {
       animation-delay: 2.75s;
   }
   
   .preloader-shape:nth-child(21) .tn-atom {
       animation-delay: 2.8s;
   }
   .preloader-shape:nth-child(22) .tn-atom  {
       animation-delay: 2.85s;
   }
    .preloader-shape:nth-child(23) .tn-atom  {
       animation-delay: 2.9s;
   }

  
@keyframes transform-block {
  0% {
     
    transform: translateX(0px);
  }

  100% {
    transform: translateX(100%);
  }
  
}
</style>

<!--Скрываем блоки после окончания анимации-->
<script>
    setTimeout(function() {
  $('.uc-preloader').addClass('hide');
  $('.t-body').addClass('overflow');
}, 3300);
</script>
Более подробные настройки в видео выше
Не получилось подключить?
Не беда, ты всегда можешь написать мне в Telegram и запросить исходник
Другие уроки
Анимация смены фона
Уроки по Тильде
Анимация и фиксация шапки
Уроки по Тильде
Фоновое видео
Уроки по Тильде
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе
Made on
Tilda