Переход между проектами
Переход между проектами
Главная /
Библиотека /
Модификация позволяет создать эффект перехода между проектами, через полигоны.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Создаём первый полноэкранный Zero-блок и писваиваем ему класс uc-list-prj-1.
Шаг 1
Наполняем Zero-блок необходимым контентом. Я создал 2 шейпа, один во весь экран, второй посередине и заголовок с категорией
Шаг 2
Далее настраиваем пошаговую анимацию для элементов. Оступ сверху у меня 160px
Шаг 3
Добавляем анимацию для заголовка. Оступ сверху у меня 193px.
Шаг 4
Изображение посередине. Отступ сверху в 75px, снизу такой же.
Шаг 5
Параллакс для фонового изображения.
Шаг 6
Дублируем Zero-блок и заменяем класс на uc-list-prj-1 и содержимое.
Шаг 7
Далее включаем у этого Zero-блока overflow: visible и двигаем заголовок с категорией и изображением выше. На тоже место, что и в первом Zero-блоке, чтобы они совпадали между собой
Шаг 8
Проделываем всё тоже самое, что и со вторым блоком. Но заменяем уже класс на uc-list-prj-3
Шаг 9
Под списком проектов создаем закрывающий Zero-блок, чтобы перекрыть содержимое списка и присваиваем класс uc-prj-last
Шаг 10
<!--Переход между проектами
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>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
