Как сделать меню-хамелеон в 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 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<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>

<script>
$(document).ready(function(){
    let chameleonID = '#rec265279589';
    let scrolldistance = 100; //Дистанция появления меню
    let menuHeight = 0;
    let sector = 0;
    let ancArr = [];
    $(chameleonID).addClass('fixed');
    setTimeout(function(){$(chameleonID).addClass('transtime')}, 500);
    function findAnchors(){
        menuHeight = $(chameleonID).height(); //Высота меню
        i=0;
        $('a[name="chameleon"]').each(function(){
            ancArr[i] = $(this).offset().top; i++;
        });
    };findAnchors();
    function getSector(){
        let topDoc = $(document).scrollTop();
        if(topDoc > scrolldistance){$(chameleonID).addClass('chameleonshow');
        }else{$(chameleonID).removeClass('chameleonshow')};
        for(i=0; i<ancArr.length; i++){
            if( (topDoc+menuHeight) < ancArr[i]  ){ sector = i; break;
            }else if ((ancArr.length-1) == i) { sector = i+1; break;
            };
        };
        if(sector % 2){$(chameleonID).addClass('chameleon');
        }else{ $(chameleonID).removeClass('chameleon');
        };
    };
    $(window).scroll(function() {getSector()});
    $(window).resize(function() {findAnchors()});
});
</script>
Made on
Tilda