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

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

1
Создали 11 блоков с возможностью задать в них высоту 100% или 100vh
2
Всем блокам задали высоту 100vh и 100% - Для ZeroBLock
3
Вставили код 1 в head страницы
4
Вставили код 2 в конец нашей страницы
Прописали в нём ID наших блоков (Для слайдера 3 блока указали отдельно)
5
Код 3 это визуальные настройки элементов в данном примере
6
Код 2* Это код без создания слайдера, только вертикальный скролл
7
Коды добавляются в блок ДРУГОЕ►Т123

В примере используется плагин fullpage.js от Álvaro Trigo
Подробнее с возможностями и дополнениями можно ознакомиться на сайтеhttps://alvarotrigo.com/fullPage/ru/
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Применяем эффект поэкранного скролла FullPage на странице в Tilda.
Длительность видео: 17 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера
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 = [  
       "#rec165990247" ,
       "#rec165990248" ,
       "#rec165990252" ,
       "#rec165990253" ,
       "#rec165990254" ,
       "#rec165990255" ,
       "#rec165990256" ,
       "#rec165990257"
                  ];
//Записываем ID нужных  блоков для создания последовательного слайдера в массив данных                   
        var blockidgoriz = [  
       "#rec165990249" ,
       "#rec165990250" ,
       "#rec165990251"
                  ];              
                  
    function completewrap(){                 
                  
//Добавляем классы к нужным блокам обычным
   for(let i = 0; i < blockidvert.length; i++){
     $(blockidvert[i]).addClass('singlelememt');
   };
//Добавляем классы к  блокам для слайдера
    for(let i = 0; i < blockidgoriz.length; i++){
     $(blockidgoriz[i]).addClass('pluralelement');
   };
   

//Оборачиваем эти блоки в секции  
   
//Оборачиваем эти блоки в секции   
   $('.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>');
   
   
   
//Переменные для контроля позиций слайдера
  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: false ,
            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--;
                    } 
                }
            }
 
});


  };  

 if ($(window).width() > 100){
    completewrap();  
    $('body,html').css('overflow','hidden');

 };


});
</script>
3

<style>
/*Настройки стрелок слайдера*/
#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;
}
div#allrecords {margin-bottom: -70px;}
.fp-section:last-child {z-index: -1;}
/*Настройки стрелок слайдера*/
.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"
                  ];
    function completewrap(){                             
//Добавляем классы к нужным блокам 
   for(let i = 0; i < blockidvert.length; i++){
     $(blockidvert[i]).addClass('singlelememt');
   };


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


//Настройки эффекта
$('#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
    
});


  };  

 if ($(window).width() > 100){
    completewrap();  
    $('body,html').css('overflow','hidden');

 };



});
</script>
Made on
Tilda