Каталог
Переход между проектами
Пошаговая инструкция с подключением кода
Шаг 1
Создаём первый полноэкранный Zero-блок и писваиваем ему класс uc-list-prj-1
Шаг 2
Наполняем Zero-блок необходимым контентом. Я создал 2 шейпа, один во весь экран, второй посередине и заголовок с категорией
Шаг 3
Далее настраиваем пошаговую анимацию для элементов. Оступ сверху у меня 160px
Шаг 4
Добавляем анимацию для заголовка. Оступ сверху у меня 193px.
Шаг 5
Изображение посередине. Отступ сверху в 75px, снизу такой же
Шаг 6
Параллакс для фонового изображения.
Шаг 7
Дублируем Zero-блок и заменяем класс на uc-list-prj-1 и содержимое
Шаг 8
Далее включаем у этого Zero-блока overflow: visible и двигаем заголовок с категорией и изображением выше. На тоже место, что и в первом Zero-блоке, чтобы они совпадали между собой
Шаг 9
Проделываем всё тоже самое, что и со вторым блоком. Но заменяем уже класс на uc-list-prj-3
Шаг 10
Под списком проектов создаем закрывающий Zero-блок, чтобы перекрыть содержимое списка и присваиваем класс uc-prj-last
Шаг 11
В конце страницы или футере добавляем код, через блок T123
CSS / JS
<!--Переход между проектами
https://mt-webdesign.ru/projects-path-->
<style>
.uc-list-1, .uc-list-prj-2, .uc-list-prj-3 {
position: relative;
overflow: hidden !important;
}
.uc-list-prj-1 {
z-index: 5 !important;
}
.uc-list-prj-2 {
z-index: 6 !important;
clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
}
.uc-list-prj-3 {
z-index: 7 !important;
clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
}
.uc-prj-last {
position: relative;
overflow: hidden !important;
z-index: 8 !important;
}
</style>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
Инструкция с копированием шаблона к себе
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (ID Шаблона), нажимаем кнопку «Выбрать»
Шаг 3
