Как сделать полноэкранный скролл Zero Block на Tilda?

С помощью этой модификации можно можно сделать горизонтальный и вертикальный скролл Zero Block.

Модификация работает с включенным Autoscale в блоках

Модификация работает только с Zero Block

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

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> <script> $(document).ready(function () { let sections = [ '#rec527617813, #rec527625775','#rec527628232, #rec527632621','#rec527638498, #rec527646113' ]; let labelOnBlock = '#rec527646113'; let speed = 600; let easingX = 'easeInOutSine'; let easingY = 'cubic-bezier(0.37, 0, 0.63, 1)'; let catchScrollTop = true; let triggerScrollTop = '.t890__arrow, [href="javascript:t190_scrollToTop()"]'; let labelStatus = false; let labelSelectorOff = '[style="display: block !important; visibility: visible !important; position: relative !important; width: 100% !important; pointer-events: all !important; opacity: 1 !important; margin: 0 !important; z-index: 1 !important"]'; let labelSelectorOn = '[style="display: block !important; visibility: visible !important; position: fixed; width: 100% !important; pointer-events: all !important; opacity: 1 !important; margin: 0px !important; z-index: 1 !important; bottom: 0px;"]'; init(); $(document).on('click', triggerScrollTop, function(e){ if (!catchScrollTop) return true; e.preventDefault(); let i = 0; let sI = setInterval(function(){ $.fn.fullpage.moveSectionUp(); i++; if (i == $(sections.join()).length) clearInterval(sI); }, speed); return false; }); window.page = $('#fullpage').fullpage({ scrollingSpeed: speed, controlArrows: false, easing: easingX, easingcss3: easingY, css3: true, scrollBar: true, onLeave: function(index, next, dir) { if (false === isVertical(index, next, dir)) return false; return true; }, }); let labelChecker = setInterval(function(){ let $slide = $(labelOnBlock).closest('.slide'); let $section = $(labelOnBlock).closest('.section'); if ($slide.hasClass('active') && $section.hasClass('active') && !labelStatus) { $(labelSelectorOff).css({'position': 'fixed', 'bottom': 0}); labelStatus = true; } if ((!$slide.hasClass('active') || !$section.hasClass('active')) && labelStatus) { $(labelSelectorOn).attr('style', 'display: block !important; visibility: visible !important; position: relative !important; width: 100% !important; pointer-events: all !important; opacity: 1 !important; margin: 0 !important; z-index: 1 !important'); labelStatus = false; } }, 500); function init() { let $first_e = $('#allrecords').prepend('<div id="fs-first"></div>'); let $last_e = $('#allrecords').append('<div id="fs-last"></div>'); makeSection($('#fs-first')); makeSection($('#fs-last')); sections.forEach(function(section){ let $slides = makeSlide($(section)); groupSlides($slides); }); makeFullpage(); $($(".section").get(1)).addClass("active"); } function makeSection($block) { return $block.wrap('<div class="section"></div>'); } function makeSlide($block) { return $block.wrap('<div class="slide"></div>'); } function groupSlides($slides) { return $slides.parent().wrapAll('<div class="section"></div>'); } function makeFullpage() { $('.section').wrapAll('<div id="fullpage"></div>'); } function isVertical(index, next, dir) { var n = $($(".section").get(index - 1)).find(".fp-slide").length, f = -1; if (n) { if ( ($($(".section").get(index - 1)) .find(".fp-slide") .each(function (index, next) { $(next).hasClass("active") && (f = index + 1); }), "down" == dir && f < n) ) return $.fn.fullpage.moveSlideRight(), !1; if ("up" == dir && 1 < f) return $.fn.fullpage.moveSlideLeft(), !1; } return (("up" != dir || $($(".section").get(index - 1)) .prev() .find(".t-rec") .attr("id") != $(".section").first().find(".t-rec").attr("id")) && ("down" != dir || $($(".section").get(index - 1)) .next() .find(".t-rec") .attr("id") != $(".section:not(.label)").last().find(".t-rec").attr("id")) && void 0); } }); </script> <style> body { overflow: hidden !important; } </style> <script> (function updateRecordType() { const scriptElement = document.currentScript; if (scriptElement) { const recordElement = scriptElement.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

КОПИРОВАТЬ КОД

Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

1. Создаем несколько Zero Block и указываем им параметр "WINDOW CONTAINER HEIGHT" 100%

2. Отключаем в настройках страницы "появление блоков при скролле". Настройки > Дополнительно > Отключить эффект появления блоков при скролле

3. Копируем id блоков в генератор кода. Важно указывать id в правильном формате так как это влияет на горизонтальный скролл или вертикальный. Ниже примеры для 3 форматов.

ВЕРТИКАЛЬНОЕ ПРОЛИСТЫВАНИЕ
Важно брать каждый блок в кавычки и между блоками ставить запятую с пробелом.
Пример: '#rec000000001', '#rec000000002', '#rec000000003' и т. д.

ГОРИЗОНТАЛНОЕ ПРОЛИСТЫВАНИЕ
Указываем все блоки через запятую с пробелом. В конце и в начале ставим кавычки.
Пример: '#rec000000001, #rec000000002, #rec000000003'

КОМБИНИРОВАННОЕ ПРОЛИСТЫВАНИЕ
Комбинируем два способа через запятую. Ниже указан пример для 6 блоков с чередующим пролистыванием(горизонтальное, вертикальное, горизонтальное, вертикальное и снова горизонтальное)
Пример: '#rec000000001, #rec000000002','#rec000000003, #rec000000004','#rec000000005, #rec000000006' и т. д.

Важно! В скрипт нужно добавлять все Zero блоки которые есть на странице. Нельзя сделать часть сайта с полноэкранным скролом, а часть без. Контент в зеро блоке должен быть в рамках экрана пользователя. Учитывайте это, особенно на мобилках.

4. Дублируем id последнего блока в генератор кода в отдельное поле.

5. При необходимости настраиваем анимацию пролистывания

6. Копируем готовый код и вставляем в HTML блок Т123

Примечание: Обязательно указывайте id последнего блока. На этом блоке скрипт автоматически покажет плашку "Made in Tilda". Без этой плашки аккаунт могут заблокировать если у вас не проплачен аккаунт на год и нельзя скрыть плашку в настройках тильда.

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

В коде важно указывать именно одинарные кавычки.

Картинки лучше загружать в формате PNG так как SVG может криво отображаться

Смотреть пример сайта