Анимация в Zero-block
фиксация при скролле
фиксация при скролле
С помощью этого скрипта можно применить анимацию фиксации к зеро-блоку
Пример
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
Пример работы кода
Инструкция
- Создаём Zero Block
- Адаптируем блок под все устройства
- Зеро блоку задаём класс: "uc-sticky-zero"
Задаём CSS класс Zero-block
6. Добавляем HTML код на страницу, в блок Другое - Т123
HTML код в блок T123
<!-- АНИМАЦИЯ ПРИ СКРОЛЛЕ В ZERO BLOCK -->
<!-- Блок представлен сайтом https://sitebelov.ru/ - Инструкции: https://sitebelov.ru/animzerscroll -->
<style>
.uc-sticky-zero {
clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);
}
.uc-sticky-zero .t396__artboard {
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var footerElement = document.querySelector('.uc-sticky-zero');
var footerSticky = document.querySelector('.uc-sticky-zero .t396__artboard');
if (footerElement && footerSticky) {
var artboardStickyHeight = footerSticky.offsetHeight;
footerElement.style.height = artboardStickyHeight + 'px';
}
});
</script>
