В этом уроке я расскажу, как создать впечатляющую трансформацию первого экрана, при входе на сайт.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Код используемый в видео
<!--Анимация при загрузке страницы-->
<!--https://mt-webdesign.ru/loading-transition-->
<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').on('click', function() {
$(this).addClass('display-none');
$(".img-bottom").addClass("animation-start");
$(".img-top").addClass("display-none")
$(".t-body").addClass("position-relative");
});
</script>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
