В этом видео я покажу, как легко сделать крутой переход с помощью пошаговой анимации.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
immersion-inside — класс для видео;
immersion-wrapper — Шейп-контейнер под видео;
immersion-wrapper — Шейп-контейнер под видео;
Классы используемые в видео
<!--Погружение между блоков
https://mt-webdesign.ru/immersion-->
<script>
$('.immersion-inside').appendTo('.immersion-wrapper .tn-atom');
</script>
<style>
.uc-immersion {
z-index: 20 !important;
position: relative;
}
.immersion-wrapper {
border-radius: 20px;
overflow: hidden !important;
}
.immersion-inside {
zoom: 1 !important;
top: 50% !important;
position: absolute;
left: 50% !important;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 480px) {
.immersion-wrapper {
border-radius: 10px !important;
}
}
</style>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
