Смешанный скролл в Тильде

UP TITLE

Введение

Если вы когда-либо задумывались о том, как улучшить визуальный опыт вашего tilda сайта, смешанный скролл в Тильде может стать вашим надежным союзником. Несмотря на то, что в Tilda Publishing нет подобного функционала, смешанный скролл можно легко реализовать с помощью нашей тильда модификации. Давайте рассмотрим, почему горизонтальный и вертикальный скролл вместе могут создать удивительное взаимодействие для ваших пользователей.

Что такое смешанный скролл в тильда

Смешанный скролл в Тильде — это инновационный подход к навигации по блокам на сайте, объединяющий горизонтальное и вертикальное движение. Простыми словами – это прокрутка страницы сверху вниз и слева на право. Этот подход призван не только обеспечить простоту использования, но и добавить визуальный интерес, делая ваш сайт более привлекательным.

Смешанный скролл в Тильда. Шаг за шагом

Давайте поговорим о том, как реализовать смешанный скролл в конструкторе сайтов Тильда:

В самом начале страницы создайте zero block
Откройте настройки этого зеро блока
Нажмите на ссылку «Добавить CSS Class Name»
В появившемся поле пропишите класс «uc-zero-container»
Откройте редактор этого блока, очистите его содержимое и удалите фоновую заливку
В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру 100
Сохраните изменения и закройте зеро блок
На следующем шаге создайте нужные вам блоки на странице. Можно использовать как стандартные блоки, так и зеро блоки.
Всем стандартным блокам в настройках присвойте класс «uc-standart»
Для нулевых блоков в поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру 100
Пустой зеро блок и те блоки, который есть в смешанном скролле, настройте для показа только на устройствах шириной больше 980px (Это значение настраивается в коде)
После всех блоков на странице создайте html блок «Т123»
Нажмите на кнопку «Контент» и скопируйте в него код нашей модификации (Код вы найдете в конце этого раздела)
В код нужно скопировать и вставить ID всех блоков, которые вы используете на странице
Если вы пропишете ID блока в отдельных кавычках, то этот блок будет прокручиваться сверху вниз
Если же прописать несколько блоков в общих кавычках через запятую, то эти блоки будут прокручиваться слева направо
После того, как все настроите, сохраните изменения и опубликуйте страницу

Пример:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>
<style>
	body {
		overflow: hidden !important;
	}
	.uc-standart {
    height: 100vh;
   
}
</style>
<script>
    var slideIds = ["#rec712112603", "#rec712088053", "#rec712088293, #rec712152108,  #rec712088574", "#rec712088832", "#rec712151740"];

    function checkDirection(currentSectionIndex, nextSectionIndex, scrollDirection) {
        var numSlides = $($('.section').eq(currentSectionIndex - 1)).find('.fp-slide').length;
        var currentSlideIndex = -1;

        if (numSlides) {
            $($('.section').eq(currentSectionIndex - 1)).find('.fp-slide').each(function (index, element) {
                if ($(element).hasClass('active')) {
                    currentSlideIndex = index + 1;
                }
            });

            if (scrollDirection == 'down' && currentSlideIndex < numSlides) {
                $.fn.fullpage.moveSlideRight();
                return false;
            }

            if (scrollDirection == 'up' && currentSlideIndex > 1) {
                $.fn.fullpage.moveSlideLeft();
                return false;
            }
        }

        return (scrollDirection != 'up' || $($('.section').eq(currentSectionIndex - 1)).prev().find('.t-rec').attr('id') != $('.section').first().find('.t-rec').attr('id')) &&
            (scrollDirection != 'down' || $($('.section').eq(currentSectionIndex - 1)).next().find('.t-rec').attr('id') != $('.section:not(.label)').last().find('.t-rec').attr('id')) &&
            undefined;
    }

    $(document).ready(function () {
    if ($(window).width() <= 980) {
            return;
        }
        var sections = $(".uc-zero-container");

        sections.wrap("<div class='section'></div>");

        slideIds.forEach(function (slideId) {
            let parents = $(slideId).wrap("<div class='slide'></div>");
            parents.parent().wrapAll("<div class='section'></div>");
        });

        $(".section").wrapAll("<div id='fullpage'></div>");

        setTimeout(function () {
            if ($("div").last().parent().parent().parent().attr("id").length == 9) {
                $("div").last().parent().parent().parent().wrap("<div class='section fp-section'></div>").parent().appendTo("#fullpage").addClass("section");
            }
        }, 3000);

        $($('.section').eq(1)).addClass("active");

        window.page = $('#fullpage').fullpage({
            scrollingSpeed: 300,
            css3: true,
            scrollBar: true,
            controlArrows: false,
            loopBottom: true,
            onLeave: function (index, nextIndex, direction) {
                if (checkDirection(index, nextIndex, direction) == false) {
                    return false;
                }
                return true;
            },
        });
    });
</script>

Преимущества горизонтального скролла

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

Часто задаваемые вопросы

Могу ли я использовать смешанный скролл на любом сайте на Tilda?

Да, смешанный скролл в Тильде доступен для использования на любых веб-страницах, созданных с помощью Tilda.

Как я могу убедиться, что мой контент выглядит одинаково хорошо на мобильных устройствах?

При использовании смешанного скролла на Tilda, система автоматически обеспечивает адаптивность контента для различных устройств в стандартных блоках, а зеро блоки нужно адаптировать самостоятельно.

Могу ли я включить смешанный скролл только для определенных секций на странице?

Нет, модификация работает только со всеми блоками на странице.

Какие SEO-преимущества принесет мне смешанный скролл?

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

Заключение

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

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