ESE - псевдослайдер

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

В данном уроке я буду использовать HTML, CSS, JAVASCRIPT, Scrolltrigger, GSAP, пошаговую анимацию, автоскейл и дополнительно другую модификацию. Я буду создавать 5 блоков, как на сайте.

Примечание

Для начала нужно будет создать сами кейсы в зероблоке, используя полноэкранный режим и присвоить им свои классы, со своими порядковыми номерами. Для первого: uc-cases-scroll-1, для второго: uc-cases-scroll-2, третий: uc-cases-scroll-3 и тд

Шаг 1

В этом зероблоке создаём следующие элементы и присваиваем им классы:

Шейп (фоновое изображение) - высотой в 130% и шириной в 100% по виндоу контейнеру (bg-project-1);
Бегущая строка (marquee__part_1);
Шейп-триггер для смены обводки у бегущей строки (link-active-1);
Шейп (затемняющий слой) - высотой в 130% и шириной в 100% по виндоу контейнеру и параметрами: pointer-events: none; opacity:(opacity-bg-1)

Шаг 2

После этих 5 блоков, создаем блок T123 и добавляем в него код. (Увеличим блоки)

Шаг 3

Показать код

<!--Увеличиваем размер холста у блоков-->
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
var artboard_2 = document.querySelector('.uc-cases-scroll-2 .t396__artboard');
if (artboard_2) {
artboard_2.style.cssText = "height: 130vh !important;";
};
var artboard_3 = document.querySelector('.uc-cases-scroll-3 .t396__artboard');
if (artboard_3) {
artboard_3.style.cssText = "height: 130vh !important;"; 
};
var artboard_4 = document.querySelector('.uc-cases-scroll-4 .t396__artboard');
if (artboard_4) {
artboard_4.style.cssText = "height: 130vh !important;"; 
};
var artboard_5 = document.querySelector('.uc-cases-scroll-5 .t396__artboard');
if (artboard_5) {
artboard_5.style.cssText = "height: 130vh !important;"; 
};
}, 1000);
});
</script>

После создаем еще блок T123 и добавляем в него код. (создадим условия по наведению)

Шаг 4

Показать код

<!--Поведение по наведению на бегущие строки-->
<script>
$('.link-active-1').mouseover(function() {
$('.bg-project-1').addClass('bg-project-active');
}).mouseout(function() {
$('.bg-project-1').removeClass('bg-project-active');
});
$('.link-active-1').mouseover(function() {
$('.marquee__part_1').addClass('marquee__part-active');
}).mouseout(function() {
$('.marquee__part_1').removeClass('marquee__part-active');
});
$('.link-active-2').mouseover(function() {
$('.bg-project-2').addClass('bg-project-active');
}).mouseout(function() {
$('.bg-project-2').removeClass('bg-project-active');
});
$('.link-active-2').mouseover(function() {
$('.marquee__part_2').addClass('marquee__part-active');
}).mouseout(function() {
$('.marquee__part_2').removeClass('marquee__part-active');
}); 
$('.link-active-3').mouseover(function() {
$('.bg-project-3').addClass('bg-project-active');
}).mouseout(function() {
$('.bg-project-3').removeClass('bg-project-active');
});
$('.link-active-3').mouseover(function() {
$('.marquee__part_3').addClass('marquee__part-active');
}).mouseout(function() {
$('.marquee__part_3').removeClass('marquee__part-active');
}); 
$('.link-active-4').mouseover(function() {
$('.bg-project-4').addClass('bg-project-active');
}).mouseout(function() {
$('.bg-project-4').removeClass('bg-project-active');
});
$('.link-active-4').mouseover(function() {
$('.marquee__part_4').addClass('marquee__part-active');
}).mouseout(function() {
$('.marquee__part_4').removeClass('marquee__part-active');
}); 
$('.link-active-5').mouseover(function() {
$('.bg-project-5').addClass('bg-project-active');
}).mouseout(function() {
$('.bg-project-5').removeClass('bg-project-active');
});
$('.link-active-5').mouseover(function() {
$('.marquee__part_5').addClass('marquee__part-active');
}).mouseout(function() {
$('.marquee__part_5').removeClass('marquee__part-active');
}); 
</script>
<style>
.bg-project-1, .bg-project-2, .bg-project-3, .bg-project-4, .bg-project-5 {
transition-duration: 0.5s;
}
.bg-project-active {
transform: scale(1.1);
}
.marquee__part_1, .marquee__part_2, .marquee__part_3, .marquee__part_4, .marquee__part_5 {
-webkit-text-stroke: 0.8px transparent;
}
.marquee__part-active {
-webkit-text-stroke: 0.8px white !important;
}
.marquee__part-active .tn-atom {
color: transparent !important;
}
</style>

Теперь создаём еще один зеро блок в полноэкраном режиме с классом uc-list-prj. А в нём создаём шейп прозрачный в высоту экрана и с классом list-shape

Шаг 5

Для этого шейпа настраиваем пошаговую анимацию с фиксацией блока по мере скролла. Так же у зероблока включаем overflow - visible.

Шаг 6

Следом еще раз T123 и добавляем в него код. (объединим кейсы в единое целое)

Шаг 7

Показать код

<!--Перемещаем в контейнер общий-->
<script>
$('.uc-cases-scroll-1, .uc-cases-scroll-2, .uc-cases-scroll-3, .uc-cases-scroll-4, .uc-cases-scroll-5').appendTo('.uc-list-prj .t396__artboard .list-shape .tn-atom');
</script>

Следом еще раз T123 и добавляем в него код. (создадим бегущую строку)

Шаг 8

Показать код

<!--Бегущая строка
https://mt-webdesign.ru/marquee-->
<style>
/*Настройки строки*/
:root {
--MarqueeRotate_1: rotate(0deg); /*угол наклона строки*/
--MarqueeIndex_1: 2; /*z-index строки - для смены положения (передний план или задний)*/
--MarqueeImg_1: ; /*путь до изображения, если оно нужно*/
--MarqueeImgWidth_1: ; /*ширина изображения (лучше использовать динамичные параметры в em)*/
--MarqueeImgHeight_1: ; /*высота изображения (лучше использовать динамичные параметры в em)*/
}
.marquee_1 {
z-index: var(--MarqueeIndex_1);
position: relative;
}
.line-marq {
z-index: 11 !important;
}
.marquee__inner_1 {
display: flex;
width: fit-content;
flex: auto;
flex-direction: row;
transform: var(--MarqueeRotate_1);
position: absolute;
left: 50%;
}
.marquee__part_1 {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 0.5em;
-webkit-text-stroke: 1px transparent;
}
.marquee__part_1:after {
content: '';
width: var(--MarqueeImgWidth_1);
height: var(--MarqueeImgHeight_1);
background-image: var(--MarqueeImg_1);
background-size: cover;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
<script>
$(document).ready(function(){
var originalElement_1 = $('.marquee__part_1');
// клонирование элементов
var duplicatedElements_1 = originalElement_1.clone().add(originalElement_1.clone())
.add(originalElement_1.clone()).add(originalElement_1.clone())
.add(originalElement_1.clone()).add(originalElement_1.clone())
.add(originalElement_1.clone());
originalElement_1.after(duplicatedElements_1);
// оборачиваем их в общий блок
$('.marquee__part_1').wrapAll('<div class="marquee__inner_1"></div>');
$('.marquee__inner_1').wrap('<div class="marquee_1"></div>');
setTimeout(function() {
let currentScroll_1 = 0;
let isScrollingDown_1 = true;
let tween = gsap.to('.marquee__part_1', {
xPercent: 100,
repeat: -1,
duration: 30, // скорость анимации (чем выше значение, тем меньше скорость)
ease: 'linear'
})
.totalProgress(0.5);
gsap.set('.marquee__inner_1', { xPercent: -50});
window.addEventListener('scroll', function() {
if(window.pageYOffset > currentScroll_1) {
isScrollingDown_1 = true;
} else {
isScrollingDown_1 = false;
}
let newTimeScale = isScrollingDown_1 ? 1 : -1; // выбор направления
gsap.to(tween, {
timeScale: newTimeScale,
});
currentScroll_1 = window.pageYOffset;
});
}, 0); 
});
</script>

Для последующий строк, дублируем код и меняем порядковые номера в коде (в видео подробно)

Шаг 9

Ниже создаём еще зероблок в экран, в нем создаем шейп-триггер для анимации, прозрачный, с pointer-events: none и высотой 200%. Класс вешаем на него cases-trigger-1. Он нужен, чтобы отследить начало и конец анимации

Шаг 9

Ниже дублируем этот же блок и заменяем у шейпа класс на cases-trigger-2. Создаём таких блоков 4 штуки, со своими порядковыми номерами.

Шаг 11

Под 4 такими блоками создаём 5 блок, но уже без триггера. Просто пустой блок высотой в экран.

Шаг 12

И в завершении: в конце и в самом начале, перед блоками с кейсами создаём 2 блока, открывающий и закрывающий, чтобы они перекрыли слайды, сверху и снизу. Им задаем класс: uc-absolute

Шаг 13

Внизу страницы добавляем код, через блок T123 (Прописываем условия для сдвига и затемнения)

Шаг 14

Показать код

<!--Прописываем условия для сдвига и затемнения-->
<style>
.uc-cases-scroll-1 {
transition-duration: 0.8s;
transform: translateY(0px);
}
.transform-up-1 {
transform: translateY(-500px);
}
.uc-cases-scroll-2 {
width: 100%;
height: 100%;
transform: translateY(500px);
transition-duration: 0.8s;
}
.transform-up-2 {
transform: translateY(0px);
}
.transform-up-again-2 {
transform: translateY(-500px);
}
.uc-cases-scroll-3 {
width: 100%;
height: 100%;
transform: translateY(500px);
transition-duration: 0.8s;
}
.transform-up-3 {
transform: translateY(0px);
}
.transform-up-again-3 {
transform: translateY(-500px);
}
.uc-cases-scroll-4 {
width: 100%;
height: 100%;
transform: translateY(500px);
transition-duration: 0.8s;
}
.transform-up-4 {
transform: translateY(0px);
}
.transform-up-again-4 {
transform: translateY(-500px);
}
.uc-cases-scroll-5 {
width: 100%;
height: 100%;
transform: translateY(500px);
transition-duration: 0.8s;
}
.transform-up-5 {
transform: translateY(0px);
}
.transform-up-again-5 {
transform: translateY(-500px);
} 
.opacity-bg-1 .tn-atom,
.opacity-bg-2 .tn-atom,
.opacity-bg-3 .tn-atom,
.opacity-bg-4 .tn-atom {
transition-duration: 0.8s;
}
.opacity-bg-active .tn-atom {
opacity: 0.85 !important;
}
.uc-absolute {
z-index: 160;
position: relative;
}
@media only screen and (max-width: 600px) {
.transform-up-1 {
transform: translateY(-200px);
}
.uc-cases-scroll-2 {
width: 100%;
height: 100%;
transform: translateY(200px);
transition-duration: 0.8s;
}
.transform-up-again-2 {
transform: translateY(-200px);
}
.uc-cases-scroll-3 {
width: 100%;
height: 100%;
transform: translateY(200px);
transition-duration: 0.8s;
}
.transform-up-again-3 {
transform: translateY(-200px);
}
.uc-cases-scroll-4 {
width: 100%;
height: 100%;
transform: translateY(200px);
transition-duration: 0.8s;
}
.transform-up-again-4 {
transform: translateY(-200px);
}
.uc-cases-scroll-5 {
width: 100%;
height: 100%;
transform: translateY(200px);
transition-duration: 0.8s;
}
.transform-up-again-5 {
transform: translateY(-200px);
} 
}
</style>

Еще ниже добавляем код, через блок T123 (Условия для работы с GSAP)

Шаг 15

Показать код

<!--Условия для работы с GSAP-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollTrigger.min.js"></script>
<style>
/*Указываем разрешение на котором начнет работать скрипт*/
@media only screen and (min-width: 0px) {
.t-body {
overflow-x: hidden;
}
.uc-cases-scroll-2 {
overflow: hidden;
z-index: 80 !important;
pointer-events: none;
position: absolute;
top: 0;
}
.uc-cases-scroll-3 {
overflow: hidden;
z-index: 90 !important;
pointer-events: none;
position: absolute;
top: 0;
}
.uc-cases-scroll-1 {
overflow: hidden;
z-index: 50 !important;
pointer-events: auto;
position: absolute;
top: 0;
height: 100vh;
width: 100vw;
}
.uc-cases-scroll-4 {
overflow: hidden;
z-index: 100 !important;
pointer-events: none;
position: absolute;
top: 0;
}
.uc-cases-scroll-5 {
overflow: hidden;
z-index: 100 !important;
pointer-events: none;
position: absolute;
top: 0;
}
.uc-cases-scroll-2 .t396,
.uc-cases-scroll-3 .t396,
.uc-cases-scroll-4 .t396,
.uc-cases-scroll-5 .t396 {
width: 110vw !important;
transform: rotate(0deg);
clip-path: polygon(91.5% 100%, 91.5% 100%, 0% 100%, 0% 100%);
overflow: hidden;
transition-duration: 0.8s;
transition-delay: 0s;
position: fixed;
}
.uc-cases-scroll-2.active .t396,
.uc-cases-scroll-3.active .t396,
.uc-cases-scroll-4.active .t396,
.uc-cases-scroll-5.active .t396 {
width: 110vw !important;
clip-path: polygon(91.5% 100%, 91.5% 0%, 0% 0%, 0% 100%);
overflow: hidden;
transform: rotate(0deg);
transition-duration: 0.8s;
}
.uc-cases-scroll-2 .t396__artboard,
.uc-cases-scroll-3 .t396__artboard,
.uc-cases-scroll-4 .t396__artboard,
.uc-cases-scroll-5 .t396__artboard {
transform: rotate(0deg);
transition-duration: 0.8s;
}
.uc-cases-scroll-2.active .t396__artboard,
.uc-cases-scroll-3.active .t396__artboard,
.uc-cases-scroll-4.active .t396__artboard,
.uc-cases-scroll-5.active .t396__artboard {
transition-duration: 0.8s;
transform: rotate(0deg);
}
.uc-cases-scroll-2.active, .uc-cases-scroll-3.active, .uc-cases-scroll-4.active, .uc-cases-scroll-5.active {
pointer-events: auto;
}
}
/*Для фиксации меню и других элементов на экране*/
.uc-cases-fix {
position: fixed;
z-index: 999 !important;
pointer-events: none;
width: 100%;
}
.uc-cases-fix .t396__artboard {
height: 100vh !important;
}
.uc-cases-fix .t396__elem {
pointer-events: all;
position: fixed;
}
</style>
<script>
/*Указываем тригер*/
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
trigger: ".cases-trigger-1",
markers: false,
start: "top top",
end: "bottom top",
triggerHook: 0,
duration: "100%",
onEnter: () => cases_action_1(), // Скролл вниз (Зашел)
onLeave: () => cases_action_2(), // Скролл вниз (Покинул)
onEnterBack: () => cases_action_3(), // Скролл вверх (Зашел)
onLeaveBack: () => cases_action_4(), // Скролл вверх (Покинул)
});
ScrollTrigger.create({
trigger: ".cases-trigger-2",
markers: false,
start: "top top",
end: "bottom top",
triggerHook: 0,
duration: "100%",
onEnter: () => cases_action_11(),
onLeave: () => cases_action_22(),
onEnterBack: () => cases_action_33(),
onLeaveBack: () => cases_action_44(),
});
ScrollTrigger.create({
trigger: ".cases-trigger-3",
markers: false,
start: "top top",
end: "bottom top",
triggerHook: 0,
duration: "100%",
onEnter: () => cases_action_111(),
onLeave: () => cases_action_222(),
onEnterBack: () => cases_action_333(),
onLeaveBack: () => cases_action_444(),
});
ScrollTrigger.create({
trigger: ".cases-trigger-4",
markers: false,
start: "top top",
end: "bottom top",
triggerHook: 0,
duration: "100%",
onEnter: () => cases_action_1111(),
onLeave: () => cases_action_2222(),
onEnterBack: () => cases_action_3333(),
onLeaveBack: () => cases_action_4444(),
});
// Поведение между 1 кейсом и 2
// Скролл вниз (Зашел)
function cases_action_1() {
$('.uc-cases-scroll-2').addClass('active');
$('.uc-cases-scroll-2').addClass('transform-up-2'); 
$('.uc-cases-scroll-1').addClass('transform-up-1'); 
$('.opacity-bg-1').addClass('opacity-bg-active'); 
};
// Скролл вниз (Покинул)
function cases_action_2() {
$('.uc-cases-scroll-2').removeClass('active');
$('.uc-cases-scroll-2').addClass('transform-up-again-2'); 
};
// Скролл вверх (Зашел)
function cases_action_3() {
$('.uc-cases-scroll-2').addClass('active');
};
// Скролл вверх (Покинул)
function cases_action_4() {
$('.uc-cases-scroll-2').removeClass('active');
$('.uc-cases-scroll-2').removeClass('transform-up-2'); 
$('.uc-cases-scroll-1').removeClass('transform-up-1'); 
$('.opacity-bg-1').removeClass('opacity-bg-active');
};
// Поведение между 2 кейсом и 3
// Скролл вниз (Зашел)
function cases_action_11() {
$('.uc-cases-scroll-3').addClass('active');
$('.uc-cases-scroll-3').addClass('transform-up-3');
$('.uc-cases-scroll-2').addClass('transform-up-again-2');
$('.opacity-bg-2').addClass('opacity-bg-active'); 
};
// Скролл вниз (Покинул)
function cases_action_22() {
$('.uc-cases-scroll-3').removeClass('active');
$('.uc-cases-scroll-3').addClass('transform-up-again-3'); 
$('.uc-cases-scroll-2').addClass('transform-up-again-2');
};
// Скролл вверх (Зашел)
function cases_action_33() {
$('.uc-cases-scroll-3').addClass('active'); 
};
// Скролл вверх (Покинул)
function cases_action_44() {
$('.uc-cases-scroll-3').removeClass('active');
$('.uc-cases-scroll-3').removeClass('transform-up-3'); 
$('.uc-cases-scroll-2').removeClass('transform-up-again-2');
$('.opacity-bg-2').removeClass('opacity-bg-active');
};
// Поведение между 3 кейсом и 4
// Скролл вниз (Зашел)
function cases_action_111() {
$('.uc-cases-scroll-4').addClass('active');
$('.uc-cases-scroll-4').addClass('transform-up-4');
$('.uc-cases-scroll-3').addClass('transform-up-again-3');
$('.opacity-bg-3').addClass('opacity-bg-active');
};
// Скролл вниз (Покинул)
function cases_action_222() {
};
// Скролл вверх (Зашел)
function cases_action_333() {
$('.uc-cases-scroll-4').addClass('active'); 
};
// Скролл вверх (Покинул)
function cases_action_444() {
$('.uc-cases-scroll-4').removeClass('active');
$('.uc-cases-scroll-4').removeClass('transform-up-4'); 
$('.uc-cases-scroll-3').removeClass('transform-up-again-3');
$('.opacity-bg-3').removeClass('opacity-bg-active');
};
// Поведение между 4 кейсом и 5
// Скролл вниз (Зашел)
function cases_action_1111() {
$('.uc-cases-scroll-5').addClass('active');
$('.uc-cases-scroll-5').addClass('transform-up-5');
$('.uc-cases-scroll-4').addClass('transform-up-again-4');
$('.opacity-bg-4').addClass('opacity-bg-active');
};
// Скролл вниз (Покинул)
function cases_action_2222() {
};
// Скролл вверх (Зашел)
function cases_action_3333() {
$('.uc-cases-scroll-5').addClass('active'); 
$('.uc-cases-scroll-5').removeClass('transform-up-again-5'); 
$('.uc-cases-scroll-4').addClass('transform-up-again-4');
};
// Скролл вверх (Покинул)
function cases_action_4444() {
$('.uc-cases-scroll-5').removeClass('active');
$('.uc-cases-scroll-5').removeClass('transform-up-5'); 
$('.uc-cases-scroll-4').removeClass('transform-up-again-4');
$('.opacity-bg-4').removeClass('opacity-bg-active');
};
</script>

Более подробные настройки, возможности взаимодействия и подключение в видео

Другие модификации

Библиотека

Вопросы и ответы

Контакты

Политика конфиденциальности

Пользовательское соглашение