Каталог
Переход с первого экрана
Пошаговая инструкция с подключением кода
Шаг 1
Создаём полноэкранный Zero-блок, в котором размещаем шейп без заливки, на всю высоту и ширину, и присваиваем этому шейпу класс akony
Шаг 2
Создаём пошаговую анимацию с фиксацией, как на скриншоте
Шаг 3
Ниже создаём еще один полноэкраный блок и вешаем на него класс uc-akony-top. Адаптируем
Шаг 4
Создаём дубликат этого блока и заменяем у него класс на uc-akony-bottom
Шаг 5
Ниже создаём пустые дополнительные блоки для пути анимации, например высотой в экран.
Шаг 6
В конце страницы или футере добавляем код, через блок T123
CSS / JS
<!--Переход с первого экрана
https://mt-webdesign.ru/akony-->
<script>
$('.uc-akony-top, .uc-akony-bottom').appendTo('.akony .tn-atom');
document.querySelector('.uc-akony-top').style.overflow = 'hidden';
document.querySelector('.uc-akony-bottom').style.overflow = 'hidden';
</script>
<style>
.uc-akony-hide {
overflow: hidden;
z-index: 20;
position: relative;
}
.akony .tn-atom {
min-height: 100vh;
height: 100%;
justify-content: flex-start;
overflow: hidden;
padding: 0;
top: 0;
width: 100%;
will-change: transform;
}
.uc-akony-top, .uc-bottom {
display: flex;
flex: none;
flex-direction: column;
flex-wrap: nowrap;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
.uc-akony-top {
height: 50%;
}
.uc-akony-bottom {
justify-content: flex-end;
height: 50%;
}
.uc-akony-top .t396__artboard, .uc-akony-bottom .t396__artboard {
position: absolute;
left: 0;
top: 0;
}
.uc-akony-bottom .t396__artboard {
transform: translateY(-50%);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
function setupAnimations() {
const triggers = [
{ elementSelector: '.uc-akony-bottom', yValue: '100%' },
{ elementSelector: '.uc-akony-top', yValue: '-100%' }
];
const triggerSelector = '.akony';
if (document.querySelector(triggerSelector)) {
if (window.matchMedia('(min-width: 0px) and (max-width: 5000px)').matches) {
triggers.forEach(({ elementSelector, yValue }) => {
if (document.querySelector(elementSelector)) {
gsap.fromTo(elementSelector,
{ y: 0, ease: 'linear' },
{
y: yValue,
scrollTrigger: {
trigger: triggerSelector,
start: "top top",
end: "top+=1000px",
scrub: true,
markers: false
}
}
);
}
});
}
}
}
setupAnimations();
});
</script>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
Инструкция с копированием шаблона к себе
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (ID Шаблона), нажимаем кнопку «Выбрать»
Шаг 3
