MUSEUM
ABOUT
GALLERIE
CONTACTS
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
At this thought he was overwhelmed by such fear that he suddenly sat bolt upright. Then began to laugh.
SCROLL
Реклама
PRESENTATION
презентационные видео
ADVERTISING
НАШИ НАПРАВЛЕНИЯ
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 блок с высотой равную шагу анимации по скроллу.
ID шаблона
19152071
Как добавить шаблон
Создаем новую страницу на сайте
Скроллим в самый низ
Добавляем нужный id шаблона
Made on
Tilda