Как сделать меню-хамелеон в Tilda
Апартаменты Ecoreel
Современное жилье в центре города
Апартаменты бизнес-класса на территории престижного района
8 (495) 151-29-30
Link#1
Link#2
Ecoreel — новые апартаменты бизнес-класса на территории престижного района в центре города. Насладитесь комфортом!
Где находятся апартаменты: 100 W Kennedy Blvd, Tampa
Преимущества проекта
Наша цель — доставить клиентам ценность через качественный сервис
  • В центре города
  • Хорошая инфраструктура
  • Парк рядом с жильем
  • Своя подземная парковка
  • Дом из экологичных материалов
  • Собственный нагрев воды в квартире
Инфраструктура в двух шагах
Апартаменты находятся в живой и активной части города с большим количеством разных активностей. Отлично подойдет спортсменам, гурманам и модникам.
  • 700 метров до парка и маркета
    Все главные места города рядом: исторические улицы, музеи, театры, современные кафе.
  • Детская площадка на территории комплекса
    450 квадратных метров зеленой территории для детей. Для тех, кто любит уединение – уютный маленький сквер и беседка.
  • Фитнес-центр
    Рядом с домом расположен большой спортивный центр: футбольное поле и бассейн, а также фитнес-центр. 10 минут пешком.
Планировка апартаментов
Выберите один из трех типов планировки. Созданы с мыслями о вашем комфорте.

Как сделать меню-хамелеон в Tilda

1
Создали меню в ZeroBlock
2
Создали в Zero 2 иконки хамелеона и задали м классы
icon-black и icon-white
3
Создали якорные блоки Т173 с именем chameleon для перехода
4
Добавили код в блок другое Т123
В коде прописали ID меню #rec265279589
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём меню в ZeroBlock, которое при скролле изменяет цвет фона и текста внутри.
Длительность видео: 32 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        
        const chameleonID = '#rec265279589';
        const scrolldistance = 100; //Дистанция появления меню
        let menuHeight = 0;
        let sector = 0;
        let ancArr = [];
        let menuElement = null;
        let resizeTimeout = null;
    
        function initChameleon() {
            menuElement = document.querySelector(chameleonID);
            if (!menuElement) return;
            
            menuElement.classList.add('fixed');
            setTimeout(() => menuElement.classList.add('transtime'), 500);
            
            findAnchors();
            setupEventListeners();
            getSector(); 
        };
    
        function findAnchors() {
            const anchors = document.querySelectorAll('a[name="chameleon"]');
            ancArr = Array.from(anchors).map(anchor => {
                const rect = anchor.getBoundingClientRect();
                return rect.top + window.pageYOffset;
            });
            
            if (menuElement) {
                menuHeight = menuElement.offsetHeight;
            };
        };
    

        function getSector() {
            const topDoc = window.pageYOffset || document.documentElement.scrollTop;
            
            if (topDoc > scrolldistance) {
                menuElement.classList.add('chameleonshow');
            } else {
                menuElement.classList.remove('chameleonshow');
            };

            for (let i = 0; i < ancArr.length; i++) {
                if ((topDoc + menuHeight) < ancArr[i]) {
                    sector = i;
                    break;
                } else if (i === ancArr.length - 1) {
                    sector = i + 1;
                    break;
                };
            };
            
            if (sector % 2) {
                menuElement.classList.add('chameleon');
            } else {
                menuElement.classList.remove('chameleon');
            };
        };
    
        function setupEventListeners() {
            window.addEventListener('scroll', getSector, { passive: true });
            
            window.addEventListener('resize', function() {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(findAnchors, 100);
            });
        };
    
        initChameleon();
 
    })();    
});    
</script>


<style> .fixed {
	 position: fixed;
	 width: 100%;
	 top: 0px;
	 z-index: 9999;
	 transform: translateY(-100%);
}
 .chameleonshow{
	 transform: translateY(0%) !important;
}
 .transtime{
	transition: all 0.4s cubic-bezier(0, 0, 0.8, 1.0)
}
 .fixed .t396__artboard {
	transition: all 0.4s ease
}
 div.chameleon .t396__artboard {
	background-color: #333 !important
}
 div.chameleon .tn-atom {
	color: #ffffff !important
}
 .icon-white{
	display:none
}
 div.chameleon .icon-white{
	display:block
}
 div.chameleon .icon-black{
	display:none
}
 </style>
Made on
Tilda