Как сделать раскрытие ZeroBlock в Tilda
Conference Program
Tuesday, March 14
Experiential graphic design
08:00–09:00
Greetings and introduction of delegates
13:00–14:30
Self-development in design and revolutions in minds at the begining of 20's
14:30–15:30
How to be a graphic designer and not to lose your soul.
Denis Mayer will tell about upcoming conference.
Experiential graphic design is the application of communication skills to the build environment.
11:30–12:30
Lettering workshop with guru of pens, brushes, colapens, bamboo dip pens and other cool tools.
Maria Wilson, projects manager in Pixels
Lysa Mayer, creative director in DD agency
Tasks may be assigned to individuals or a group and may be categorized as convergent or divergent.
Calligraphy workshop
Crowdsourcing in graphic design companies
Experiential graphic design
Experiential graphic design is the application of communication skills to the build environment.
13:00–14:30
14:30–15:30
Show More

Как сделать раскрытие ZeroBlock в Tilda

1
Создали ZeroBlock с основным контентом
2
Создали ещё один Zero и включили ему overflow - visible
Кнопке задали класс deployzero
Создали Shape c градиентом перехода и задали ему класс dissolv
100% ширина по Window и 300px высота, цвет для градиента
{'type':'linear','angle':180,'colors':[{'color':'rgba(255,255,255,0.11)','stop':5},{'color':'rgba(240,240,240,1)','stop':50}]}

Высоту блока задали 0px, вертикальная привязка контента - Top
3
Добавили код на страницу в блок Другое - Т123
В коде прописали процентный отступ от верха блока в закрытом состоянии для разных экранов.
ширина экрана/процент отступа
let percentList = [
[400,30],
[600,30],
[800,40],
[1200,50],
[1500,50]
];
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём открытие и раскрытие ZeroBlock по клику на кнопку. Делаем плавный переход через градиент.

Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<style>
.overlay-mode{
    position: relative;
    z-index: 199;
}
.deployzero{cursor:pointer}
.art-tr .t396 ,
.dissolv{
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}
.dissolv-hide{
    opacity: 0;
    pointer-events: none;
}
</style>

<script>
$( document ).ready(function() {
let btnText = "Hide";
    
let percentList = [
    [100,30],
    [400,30],
    [600,30],
    [800,40],
    [1200,50],
    [1500,50]
];

let btnMode= false;
let maxHpercent = 0;

function hideMove(em,pr){
    let height = em.find('.t396__artboard').height();
    let width = $(window).width();
    $.each(percentList,function(index,value){
        if (width>value[0]){maxHpercent=value[1]}
    });

    let mxH = height*(maxHpercent/100);
    if(pr){ em.find('.t396').css('max-height', height)
    }else{  em.find('.t396').css('max-height', mxH) };
};

setTimeout(function(){
//Добавляем классы к кнопке и основному Zero
$('.deployzero').closest('.t-rec').each(function(){
    $(this).addClass('overlay-mode');
    let mBlk = $(this).prev('[data-record-type="396"]');
    mBlk.addClass('art-tr');hideMove(mBlk);
    $(this).find('.tn-atom').attr('data-btn-caption', $(this).find('.tn-atom').text());
    
});
//При клике на кнопку
$('.deployzero').on('click', function(e) {
    let mBlk = $(this).closest('.t-rec').prev('[data-record-type="396"]');
    if (!$(this).hasClass('open-mode')) { 
        $(this).addClass('open-mode');
        mBlk.addClass('open-block');
        btnMode = true;
        hideMove(mBlk,btnMode);
        $(this).siblings('.dissolv').addClass('dissolv-hide');
        $(this).find('.tn-atom').text(btnText);
    } else {
        $(this).removeClass('open-mode');
        mBlk.removeClass('open-block');
        btnMode = false;
        hideMove(mBlk,btnMode);
        $(this).siblings('.dissolv').removeClass('dissolv-hide');
        $(this).find('.tn-atom').text( $(this).find('.tn-atom').attr('data-btn-caption'));
        let speed = 400;let top = mBlk.offset().top;
        $('html, body').animate({scrollTop: top}, speed);
    };
});

}, 1000);

$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ 
    $('.art-tr').each(function(){
        let mBlk = $(this);
        if ($(this).hasClass('open-block')) { btnMode = true
        }else{ btnMode = false};  
        hideMove(mBlk,btnMode);
    });
}, 1000);});
});
</script>
Made on
Tilda