Каталог
Анимация частиц
Пошаговая инструкция с подключением кода
Шаг 1
Создаём Zero-блок и вешаем класс uc-particles-1 (-1 будет являться порядковым номером, если нужен новый похожий блок, то меняем на последующем свой порядковый номер, к примеру -2)
Шаг 2
Для блока в котром будет происходить смена цвета вешаем класс uc-dark (на темные блоки)
Шаг 3
В конце страницы или футере добавляем код, через блок T123
CSS / JS
<!--Смена палитры по скроллу-->
<!--https://mt-webdesign.ru/header-change-->
<style>
.uc-menu-dark, .uc-menu-light {
position: fixed;
z-index: 999;
width: 100%;
transition: opacity 0.5s;
}
.uc-menu-dark {
opacity: 0;
pointer-events: none;
}
.uc-menu-light {
opacity: 1;
pointer-events: all;
}
.uc-menu-dark.in-view {
opacity: 1 !important;
pointer-events: all !important;
}
.uc-menu-light.in-view {
opacity: 0;
pointer-events: none !important;
}
</style>
<script src="https://matilda-design.ru/library/GSAP.js"></script>
<script src="https://matilda-design.ru/library/ScrollTrigger.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
document.querySelectorAll('.uc-dark').forEach(function(trigger_header) {
gsap.timeline({
scrollTrigger: {
trigger: trigger_header,
start: "top-=100 top",
end: "bottom-=100 top",
scrub: 0.5,
markers: false,
onEnter: function() {
$('.uc-menu-light').addClass('in-view');
$('.uc-menu-dark').addClass('in-view');
},
onLeave: function() {
$('.uc-menu-light').removeClass('in-view');
$('.uc-menu-dark').removeClass('in-view');
},
onEnterBack: function() {
$('.uc-menu-light').addClass('in-view');
$('.uc-menu-dark').addClass('in-view');
},
onLeaveBack: function() {
$('.uc-menu-light').removeClass('in-view');
$('.uc-menu-dark').removeClass('in-view');
},
},
});
});
</script>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
Инструкция с копированием шаблона к себе
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (ID Шаблона), нажимаем кнопку «Выбрать»
Шаг 3
