Как применить к сайту эффект поэкранного пролистывания Full Page Scroll для Tilda

Как создали данный пример:

1. Создали 11 блоков с возможностью задать в них высоту 100% или 100vh
(Блоки в примере по порядку :
CR17, AB602 , BF303 , ZeroBlock, ST215, PR401, TS302N , BF311N , CR37
2. Всем блокам задали высоту 100vh и 100% - Для ZeroBLock
3. Создали 3 блока BF303 - из них сделаем слайдер
4. Вставили код 1 в head страницы
5. Вставили код 2 в конец нашей страницы
Прописали в нём ID наших блоков (Для слайдера 3 блока указали отдельно)
6. Код 3 это визуальные настройки элементов в данном примере
7. Код 2* Это код без создания слайдера, только вертикальный скролл

Коды добавляются в блок ДРУГОЕ►Т123

В примере используется плагин fullpage.js от Álvaro Trigo
Подробнее с возможностями и дополнениями можно ознакомиться на сайте
https://alvarotrigo.com/fullPage/ru/
СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём пример на базе ZeroBlock
2. Отключаем мобильную версию
3. Создаём штатное меню
4. Добавляем слайдер из блоков

Применяем эффект поэкранного скролла FullPage на странице в Tilda.
Длительность видео: 24 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео

1
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

2
<script>
    $( document ).ready(function() {
//Записываем ID нужных вертикальных блоков в массив данных       
      var blockidvert = [  
       "#rec81980933" ,
       "#rec81980934" ,
       "#rec81981007" ,
       "#rec81982359" ,
       "#rec81982611" ,
       "#rec81980941" ,
       "#rec81983115" ,
       "#rec81983862"
                  ];
//Записываем ID нужных  блоков для создания последовательного слайдера в массив данных                   
        var blockidgoriz = [  
       "#rec81980943" ,
       "#rec82022091" ,
       "#rec82022144"
                  ];              
                  
                  
                  
//Добавляем классы к нужным блокам обычным
   for(let i = 0; i < blockidvert.length; i++){
     $(blockidvert[i]).addClass('singlelememt');
   };
//Добавляем классы к  блокам для слайдера
    for(let i = 0; i < blockidgoriz.length; i++){
     $(blockidgoriz[i]).addClass('pluralelement');
   };
   
function completewrap(){
//Оборачиваем эти блоки в секции   
   $('.singlelememt').wrap('<section class="vertical-scrolling"></section>');
//Оборачиваем эти блоки в секции   
   $('.pluralelement').wrap('<section class="horizontal-scrolling sliderblock"></section>');   
   //Оборачиваем эти блоки в секции   
   $('.sliderblock').wrapAll('<section class="vertical-scrolling"></section>');
//Все блоки оборачиваем в общий контейнер
   $('.vertical-scrolling').wrapAll('<div id="fullPage"></div>');
};  

 if ($(window).width() > 100){
    completewrap();    
 };

   
//Переменные для контроля позиций слайдера
  var slideIndex2 = 1, sliding = false;

//Настройки эффект
$('#fullPage').fullpage({
    sectionSelector: '.vertical-scrolling',
    slideSelector: '.horizontal-scrolling',
    anchors: ['main', 'hello', 'slidefull', 'service', 'bike', 'works', 'about', 'meet', 'theend'],
    navigationTooltips: ['Main', 'Hello', 'SlideFull', 'Service'  ,'Bike' , 'Works', 'About', 'Meet' ,'Theend'],
            css3: true,
            scrollingSpeed: 2500,
            navigation: true,
            slidesNavigation: true,
            responsiveHeight: 330,
            dragAndMove: true,
            scrollBar: true, 
            loopTop:true,
            loopBottom:true,
            scrollHorizontally: true ,
            controlArrows: true ,
    
   onLeave  : function (index, nextIndex, direction) {
                if (index == 3 && !sliding) {
                    if (direction == 'down' && slideIndex2 < 3) {
                        sliding = true;
                        $.fn.fullpage.moveSlideRight();
                        return false;
                    } else if (direction == 'up' && slideIndex2 > 1) {
                        sliding = true;
                        $.fn.fullpage.moveSlideLeft();
                        return false;
                    }
                } else if (sliding) {
                    return false;
                }
            },
            afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
                sliding = false;
            },
            onSlideLeave  : function (anchorLink, index, slideIndex, direction, nextSlideIndex) {
                if (index == 3) {
                    if (direction == 'right') {
                        sliding = true;
                        slideIndex2++;
                    }
                    
                    if (direction == 'left') {
                        sliding = true;
                        slideIndex2--;
                    } 
                }
            }
 
});

});
</script>

3
<style>
/*Скрываем скролл бар*/
@media (min-width: 100px) {
body,html{ 
    overflow: hidden !important; 
} 
}
/*Настройки стрелок слайдера*/
#fp-nav ul li a span, .fp-slidesNav ul li a span {
    border: 2px solid #fff;
    background: none;
    box-shadow: 0px 0px 12px 3px white;
}
/*Настройки стрелок слайдера*/
.fp-controlArrow.fp-next {
    right: 50px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: #f30f0f00 #fb303000 #ff1c1c00 #fff;
}
/*Настройки стрелок слайдера*/
.fp-controlArrow.fp-prev {
    left: 50px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
/*Настройки подписей навигации*/
#fp-nav ul li .fp-tooltip {
    color: #000000;
    text-shadow: 0px 0px 4px #ffffff;
}
/*Настройки подписей навигации*/
#fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: padding 0.6s ease-in;
    transition: padding 0.6s ease-in;
    padding-right: 10px;
}

</style>

2*
<script>
    $( document ).ready(function() {
//Записываем ID нужных вертикальных блоков в массив данных       
      var blockidvert = [  
       "#rec81980933" ,
       "#rec81980934" ,
       "#rec81981007" ,
       "#rec81982359" ,
       "#rec81982611" ,
       "#rec81980941" ,
       "#rec81983115" ,
       "#rec81983862"
                  ];
                             
//Добавляем классы к нужным блокам 
   for(let i = 0; i < blockidvert.length; i++){
     $(blockidvert[i]).addClass('singlelememt');
   };

function completewrap(){
//Оборачиваем эти блоки в секции   
   $('.singlelememt').wrap('<section class="vertical-scrolling"></section>');
//Все блоки оборачиваем в общий контейнер
   $('.vertical-scrolling').wrapAll('<div id="fullPage"></div>');
};
if ($(window).width() > 100){
    completewrap();    
 };

//Настройки эффекта
$('#fullPage').fullpage({
    sectionSelector: '.vertical-scrolling',
    anchors: ['main', 'hello', 'slidefull', 'service', 'bike', 'works', 'about', 'meet', 'theend'],
    navigationTooltips: ['Main', 'Hello', 'SlideFull', 'Service'  ,'Bike' , 'Works', 'About', 'Meet' ,'Theend'],
            css3: true,
            scrollingSpeed: 2500,
            navigation: true,
            slidesNavigation: true,
            responsiveHeight: 330,
            dragAndMove: true,
            scrollBar: true, 
            loopTop:true,
            loopBottom:true,
            controlArrows: true
    
});

});
</script>
Made on
Tilda