Связаться
Портфолио
Обо мне
1
Модификации
Портфолио
Услуги
Политика конфиденциальности
Услуги
Связаться
Эффект наложение блоков
Эффект наложения блоков
Необычные анимации могут придать дополнительную изюминку твоему сайту на Tilda. Добавь красочный переходы элементам на странице и твой сайт будет выгодно выделяться на фоне конкурентов. Данную модификацию можно применять как с Зеро, так и с обычными блоками
Инструкция по установке
Инструкция
Видеоинструкция
Время настройки : 15 секнд
<script>
$(function(){
    /* Укажите id всех блоков через запятую, которым нужно добавить эффект наложения */
    var id = '#rec825763352,#rec825763353,#rec825763354';

    $('head').append('<style>body {overflow-x: hidden;}#allrecords {overflow: visible !important;}#t-header,#t-footer {position: relative;z-index: 2;} .t-rec {position: relative;z-index: 1;overflow-x: hidden;}'+id+' { position: -webkit-sticky; position: sticky; top: 0; z-index: -1;}</style>');

    var lastBlock = $(id).last();
   
    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          
            if (!entry.isIntersecting) {
                $(entry.target).css('visibility', 'hidden');
            } else {
                $(entry.target).css('visibility', 'visible');
            }
        });
    }, { threshold: 0 });

    observer.observe(lastBlock[0]);

    $(window).on('load resize', function(){
        $(id).each(function(){
            var topPosition = $(window).height() - $(this).height();
            if (topPosition < 0) {
                $(this).css('top', topPosition)
            } else {
                $(this).css('top', 0)
            }
        });
    });
});
</script>
1
2
3
<style> input { width: 100%; box-sizing: border-box; height: 40px; margin-bottom: 30px; ...
T123
Zero Block
Создайте необходимое количество
и скопируйте в него код
У всех блоков должен быть задан фоновый цвет
После созданных блоков добавьте элемент
Скопируйте ID всех ваших блоков, к которым должен прмениться эффект наложения, и вставьте в код через запятую
Для того, чтобы после блоков с эффектом наложения использовать обычные статичные блоки без эффектов, сделайте следующее:
3
Создайте желаемый блок и задайте фоновый цвет для всего блока
Сохраните изменения и опубликуйте страницу