Трансформация с пошаговой анимацией

Трансформация с пошаговой анимацией

В этом видео я расскажу, как можно создать интересную трансформацию между блоками, используя пошаговую анимацию.

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
48255519
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
uc-main-trans — Зеро блок с первого экрана (зеленый);
uc-text-marquee — Зеро блок с бегущими строками (черный);
main-trans — Класс для шейпа, в который поместится uc-main-trans;
text-marquee — Класс для шейпа, в который поместится uc-text-marquee;
uc-overlap — Зеро блок с последнего экрана (светлый), нужен, чтобы перекрыть верхние блоки;
display-visible — Дополнительный класс, чтобы скрыть времено блоки во время загрузки;
Классы используемые в видео
Добавить код в блок T123 внизу страницы
Код из видео
<!--Трансформация с пошаговой анимацией
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;
}
</style>
<script>
setTimeout(function() {
$('.uc-text-marquee').appendTo('.text-marquee .tn-atom').addClass('display-visible');
$('.uc-main-trans').appendTo('.main-trans .tn-atom').addClass('display-visible');
}, 1000);
</script>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
3D галерея
Tilda
Подсказки при наведении курсора
Tilda