В этом видео я расскажу, как можно создать эффект с пиксельным переходом между блоков.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Создаём Zero блок и вешаем на него класс uc-section-cubes-1 (2,3,4,5 и тд)
Шаг 1
Выставляем этому блоку размер контейнера со значениями: window ширина - 100% и высота - 100% и ставим по центру. Добавляем на него класс: cubes-1
Шаг 3
Создаем ему пошаговую анимацию с фиксацией этого блока по скроллу. За основу я взял Zero блок с размерами в 1700px (режим автоскейл) и добавил анимацию для блока, как на скриншоте ниже
Шаг 4
Анимацию с первым текстом я зафиксировал по скроллу. Отступ у триггера задал тот же, что и растояние от верхней границы в 220px.
Шаг 5
<!--Пиксельный переход-->
<!--https://mt-webdesign.ru/pixels-->
<!--Подключаем библиотеку-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>
<!--Меняем цвет кубиков и их размеры в параметрах fill (цвет) и scale (размер)-->
<style>
.cubes-1, .cubes-2 {
zoom: 1 !important;
pointer-events:none;
}
.cubes-1 rect {
transform: scale(2);
fill: #5454bf;
}
.cubes-2 rect {
transform: scale(2);
fill: #daffc2;
}
</style>
<!--Добавляем скрипт (заменить класс триггера на свой - uc-section-cubes-1, класс с кубиками - cubes-1 -->
<script>
gsap.set(".bolt polygon", { transformOrigin: "center center" });
let svgcubes_1 = gsap.timeline({
scrollTrigger: {
trigger: ".uc-section-cubes-1",
start: "top top",
end: "bottom bottom",
scrub: true
}
});
svgcubes_1.from(".cubes-1 rect", { opacity: 0, duration: 0.001, stagger: { amount: 0.3, from: "random" } });
svgcubes_1.from(".bolt polygon", { scale: 0.1, ease: "power3.in", stagger: 0.002 });
svgcubes_1.from(".bolt polygon", { opacity: 0, duration: 0.001, ease: "power3.in", stagger: 0.002 }, "<");
</script>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
