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

Уроки по Тильде

В этом видео я расскажу, как можно создать свой прелоадер с анимацией шторы

Описание

Материал из видео

В 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 и запросить исходник

Другие уроки

Анимация смены фона

Уроки по Тильде

Анимация и фиксация шапки

Уроки по Тильде

Фоновое видео

Уроки по Тильде