MUSEUM
ABOUT
GALLERIE
CONTACTS
At this thought he was overwhelmed by such fear that he suddenly sat bolt upright. Then began to laugh.
SCROLL
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
There is no design without discipline. There is no discipline without intelligence.
The best ideas come as jokes. Make your thinking as funny as possible.
Everything should be made as simple as possible, but not simpler.
Как сделать
Общие действия
Меню со сменой цвета
Меню хамелеон mo.ti
Инструкцию взял вот отсюда: https://mo-ti.ru/hamelionmenu

1. Делаем меню в zero блоке.
2. Код меняет только цвет текста. Для всех иконок, линий и т.п. нужно делать svg изображение и ставить класс у элемента icon-black и icon-white
3. Для того, чтобы меню понимало, где менять цвет, мы создаем якорную ссылку #chameleon
4. Добавляем код и меняем #rec на ваш.
<style>
.fixed {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 9999;
    /*Скрыть меню и загрузке*/
}
.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:#1d1d1d !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 = '#rec311649951'; /*id нашего zero меню*/
    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>
Общие действия
1. Все элементы располагаем на экране и двигаем вправо, как бегущая строка
2. Высоту экрана делаем 650 px и растягиваем на 100% экрана.
3. Делаем у блока Overflow VISIBLE
4. Снизу добавляем Zero блок с высотой равную длине шага последнего элемента. Но вообще лучше просто делать экспериментальным путем.
5. Чтобы наш текст не залезал уже на 3 блок (который темный), мы в 3 блоке создаем штук 20 невидимых шейпов, чтобы у нас было много слоев, далее выше них делаем перекрытие шейпом в цвет фона (под эти шейпом и будут прятаться элементы, которые анимированы по скроллу), а уже над этим шейпом вы располагаем всю нашу инфу, которая должна быть в блоке. Скрин ниже.
Шрифт: Cormorant Garamond
Почему я добавляю шрифт изображением
У меня куча шаблонов с кучей разных шрифтов. Тильда не разрешаем столько шрифтов использовать на одном сайте (а все шаблоны у меня на одном домене). Я и добавляю все как изображение. Иначе все шаблоны были бы одинаковые и скучные.
Фиксирование
Для того, чтобы зафиксировать нужный нам объект, в настройках анимации по скроллу мы выбираем данную функцию.
Все элементы находятся на главном экране, поэтому для всех триггером мы ставим "on Window Bottom". Это позволит не считать расстояние от верха экрана до каждого анимируемого элемента, чтобы вся анимации сработала синхронно.

PS. Расстояние у каждого элемента нужно выставлять nuulf? когда анимируемые элементы находятся на втором блоке и ниже, а также они находятся на разной высоте между собой.
Сохранение 100% высоты экрана
Чтобы сохранить пропорции в блоке, мы делаем высоту блока 100% высоты экрана. Минимальное значение 550 px будет достаточно.
Выставляем значение блока OVERFLOW VISIBLE
Вниз добавляем пустой Zero блок с высотой равную шагу анимации по скроллу.