Эффект наложения блоков при скролле в Tilda. Пошаговая инструкция

Введение

В этой статье мы пошагово объясним, как сделать эффект наложения блоков при скролле в Tilda. Tilda – это интуитивно понятный сервис для создания веб-сайтов без необходимости программирования. Он предоставляет различные инструменты и функции, включая возможность создания эффектов при скролле страницы, таких как наложение блоков. В данной статье мы расскажем, как реализовать этот эффект с помощью Tilda и создать уникальную интерактивность на вашем веб-сайте.

Статья будет разделена на две части. В первой части мы с вами получим эффект наложения блоков при скролле, используя только нулевые блоки или zero block tilda. Во второй же части применим этот эффект на стандартные блоки.

Как создать эффект наложения блоков при скролле в Tilda, используя zero block

Итак, для того, чтобы этот метод заработал в полную силу, на вашей странице в самом начале должен быть хотя бы один обычный статический блок. Если это условие выполняется, то следуйте инструкции ниже:

1. Создайте zero block
2. Нажмите на кнопку «Редактировать блок»
3. Нажмите на кнопку «Settings»
4. В поле «Window container height, %» пропишите значение «100»
5. Наполните этот блок по своему усмотрению и закройте его
6. Продублируйте этот zero block столько раз, сколько блоков с эффектом наложения вам необходимо
7. Измените контент в продублированных блоках, соответственно
8. После всех блоков на странице нажмите на кнопку «+», выберите пункт «Другое» и добавьте html блок «Т123»
9. Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<script>

$(function(){
    /* Укажи id всех блоков через запятую, которым нужно добавить эффект наложения */
    var id = '#rec624466290,#rec624466415,#rec624466453';

    $('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: 0;}</style>');
    
    $(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>

10. Сохраните изменения и закройте блок.
11. Нажмите на кнопку «Настройки» у первого zero block и скопируйте его ID
12. Вставьте скопированный ID в код выше
13. Аналогичным образом скопируйте ID всех остальных блоков и вставьте в код (Пример: var id = ‘#rec624466290,#rec624466415,#rec624466453’;)

Для того, чтобы после блоков с эффектом наложения использовать обычные статичные блоки без эффектов, сделайте следующее:

1. Добавьте любые желаемые блоки
2. Нажмите на кнопку «Настройки» у добавленного блока
3. Задайте для всего блока любой фоновый цвет
4. Сохраните изменения и опубликуйте страницу

После публикации страницы вы увидите, что нулевые блоки (zero block), к которым мы применили эффект наложения, плавно накладываются друг на друга. А те блоки, которые идут после нулевых блоков, прокручиваются как обычно, в штатном режиме.

Как создать эффект наложения блоков при скролле в Tilda, используя стандартные блоки

Общий принцип использования эффекта наложения у стандартных блоков практически такой же, как и у zero block, за исключением одной небольшой детали:

1. Создайте любые стандартные блоки, к которым вы будете применять эффект наложения блоков при скролле в Tilda
2. Для всех блоков задайте фоновые цвета в настройках каждого
3. После всех блоков на странице нажмите на кнопку «+», выберите пункт «Другое» и добавьте html блок «Т123»
4. Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<style>
	#rec624466290, #rec624466415, #rec624466453 {
	height: 100vh;
}
</style>

5. Вместо ID в коде, скопируйте и вставьте id всех блоков с эффектом наложения через запятую
6. После этого, в этот же html блок скопируйте и вставьте следующий код:

<script>

$(function(){
    /* Укажи id всех блоков через запятую, которым нужно добавить эффект наложения */
    var id = '#rec624466290,#rec624466415,#rec624466453';

    $('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: 0;}</style>');
    
    $(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>

7. Замените ID в коде на ID ваших блоков с эффектом наложения
8. Сохраните изменения и опубликуйте страницу

Заключение

Эффект наложения блоков при скролле – это мощный инструмент для добавления интерактивности и привлекательности к вашему веб-сайту. Следуя нашей пошаговой инструкции, вы сможете легко создать этот эффект с помощью Tilda и удивить своих посетителей уникальным дизайном и визуальным опытом. Экспериментируйте, кастомизируйте и делайте свой сайт неповторимым! Не забывайте сохранять изменения и наслаждаться результатом вашего творчества.

Смотрите обучающие видео уроки по Тильде тут

Читайте также: горизонтальный скролл слайдер в тильда