В этом видео я расскажу, как можно создать интересную трансформацию между блоками, используя пошаговую анимацию.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
uc-main-trans — Зеро блок с первого экрана (зеленый);
uc-text-marquee — Зеро блок с бегущими строками (черный);
main-trans — Класс для шейпа, в который поместится uc-main-trans;
text-marquee — Класс для шейпа, в который поместится uc-text-marquee;
uc-overlap — Зеро блок с последнего экрана (светлый), нужен, чтобы перекрыть верхние блоки;
display-visible — Дополнительный класс, чтобы скрыть времено блоки во время загрузки;
uc-text-marquee — Зеро блок с бегущими строками (черный);
main-trans — Класс для шейпа, в который поместится uc-main-trans;
text-marquee — Класс для шейпа, в который поместится uc-text-marquee;
uc-overlap — Зеро блок с последнего экрана (светлый), нужен, чтобы перекрыть верхние блоки;
display-visible — Дополнительный класс, чтобы скрыть времено блоки во время загрузки;
Классы используемые в видео
<!--Трансформация с пошаговой анимацией
https://mt-webdesign.ru/step-by-transform-->
<style>
.uc-main-trans, .uc-text-marquee {
display: none;
}
.uc-overlap {
z-index: 99 !important;
position: relative;
}
.display-visible {
display: block !important;
overflow: hidden !important;
}
.uc-block-bg {
position: fixed;
z-index: 97;
}
.main-trans {
position: relative !important;
z-index: 99 !important;
}
.text-marquee {
position: relative !important
z-index: 89 !important;
}
</style>
<script>
setTimeout(function() {
$('.uc-main-trans').appendTo('.main-trans .tn-atom').addClass('display-visible');
$('.uc-text-marquee').appendTo('.text-marquee .tn-atom').addClass('display-visible');
}, 500);
setInterval(function() {
$('.main-trans .tn-atom__sbs-anim-wrapper').css('top', '0');
$('.text-marquee .tn-atom__sbs-anim-wrapper').css('top', '0');
}, 100);
</script>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
