Меню

Анимация при загрузке страницы

Уроки по Тильде
В этом уроке я расскажу, как создать впечатляющую трансформацию первого экрана, при входе на сайт
Описание
Материал к уроку
Поместить код ниже в блок T123
Скрипты и стили из видео
<style>
    .img-top {
        overflow: hidden;
    }
    
    .animation-start {
        left: 0px !important;
        right: 0px !important;
        top: 0% !important;
        bottom: 0px !important;
        width: 100% !important;
        height: 100% !important;
        transition: 1.6s ease-in-out 0s;
    }
    
    .animation-start .tn-atom {
        border-width: 0px !important;
        transition: 1.6s ease-in-out 0s;
    }
    
    .display-none {
        display: none;
    }
    
    .t-body {
        position: fixed;
        width: 100%;
    }
    
    .position-relative {
        position: relative;
    }
    
</style>

<script>
  $(".img-border").click(function(){
  $(".img-bottom").addClass("animation-start")
})
</script>

<script>
    $('.img-border').on('click', function() {
    $(this).addClass('display-none');
});
</script>

<script>
  $(".img-border").click(function(){
  $(".img-top").addClass("display-none")
})
</script>

<script>
  $(".img-border").click(function(){
  $(".t-body").addClass("position-relative")
})
</script>
Другие уроки
Анимация смены фона
Уроки по Тильде
Анимация и фиксация шапки
Уроки по Тильде
Фоновое видео
Уроки по Тильде
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе
Made on
Tilda