Смешанный
Горизонтальный
Вертикальный
1) Создаем два зеро блока. Один будет в начале страницы, второй в конце. Они нужны исключительно в технических целях. Контент на этих экранах быть не должен и лучше поставить им задний фон как на остальном сайте.

2) Создаем блоки, которые мы будем использовать.

3) Добавляем в конце страницы блок Другое -> T123 HTML-код и вставляем в него код, который находится ниже.

4) В коде есть несколько отметок, где нужно ввести данные своих блоков или настройки для скролла. Они выглядят вот так:
/*****************************************/
/***************Часть 1******************/
/*****************************************/

4.1) В части 1 нам нужно указать id первого технического блока, всех блоков, которые находятся вне горизонтального скролла и последнего технического блока.
var sections = $("#rec109090577, #rec109090584");

4.2) И id всех блоков, которые нужны для горизонтальный секций. Обратите внимание, если у вас одна горизонтальная секция, тогда вам нужно просто написать в таком формате "#rec109090579, #rec109090580, #rec109090581". Если же у вас несколько горизонтальных секций, тогда вам нужно указывать как в первом варианте, но через запятую. В примере ниже показан вариант с двумя горизонтальными секциями. Обратите внимание на кавычки и запятую после третьего блока, это означает что закончилась одна секция и началась другая.
var sliders = ["#rec109090579, #rec109090580, #rec109090581", "#rec109090579, #rec109090580"];

5) Если у вас на сайте внизу есть плашка Made On Tilda, в части 2 нужно добавить этот код. В противном случае, ваш аккаунт могут забанить. Работает только с стандартной плашкой.
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)

6) В части 3 можно указать дополнительные настройки:
// Скорость скролла
scrollingSpeed: 600,
// Анимация
// Можно заменить "easeInOutCubic" на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: "easeInOutCubic",
// Управление клавиатурой
keyboardScrolling: true,
// Стрелки управления на горизонтальном скролле
controlArrows: true,
// Скролл с последнего экрана переводит на первый экран
loopBottom: true,
// Скролл с последнего экрана переводит на первый экран
loopTop: true,
// Якорные ссылки на страницу.
// Вы можете на любом экоране добавить кнопку, с ссылкой #nav/2, при нажатии на неё пользователь попадет на третий экран.
// Так-же, можно скопировать ссылку mysite.com/#nav/2 и при переходе на неё, пользователь попадет сразу на третий экран.
// Почему на четвертый экран?
// У первого экрана будет ссылка mysite.com/#nav
// У второго экрана будет ссылка mysite.com/#nav/1
// У третьего экрана будет ссылка mysite.com/#nav/2
// Так-же, вместо nav вы можете написать что-нибудь другое.
anchors:['', 'nav'],
Смешанный скролл
<!-- Тильдошная смешанный скролл для Тильды -->
<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>
function check_direction(t,e,i){var n=$($(".section").get(t-1)).find(".fp-slide").length,f=-1;if(n){if($($(".section").get(t-1)).find(".fp-slide").each(function(t,e){$(e).hasClass("active")&&(f=t+1)}),"down"==i&&f<n)return $.fn.fullpage.moveSlideRight(),!1;if("up"==i&&1<f)return $.fn.fullpage.moveSlideLeft(),!1}return("up"!=i||$($(".section").get(t-1)).prev().find(".t-rec").attr("id")!=$(".section").first().find(".t-rec").attr("id"))&&(("down"!=i||$($(".section").get(t-1)).next().find(".t-rec").attr("id")!=$(".section:not(.label)").last().find(".t-rec").attr("id"))&&void 0)}


$(document).ready(function() {
	/*************************************************/
	/*******************Часть 1***********************/
	/*************************************************/
	// Указываем простые секции
	var sections = $("#rec109985702, #rec109985750");
	// Указываем группы слайдов
	var sliders = ["#rec109985749, #rec109985703", "#rec109985704, #rec109985713", "#rec109985708, #rec109985710"];


	sections.wrap("<div class='section'></div>");
	sliders.forEach(function(s){
		let parents = $(s).wrap("<div class='slide'></div>");
		parents.parent().wrapAll("<div class='section'></div>");
	})
	$(".section").wrapAll("<div id='fullpage'></div>");

	/*********************************************/
	/*****************ЧАСТЬ 2*********************/
	/*********************************************/


	$($(".section").get(1)).addClass("active");
	window.page = $('#fullpage').fullpage({
		/*************************************************/
		/*******************Часть 3***********************/
		/*************************************************/
		// Скорость скролла
		scrollingSpeed: 300,


		// Не трогать
		css3: true,
		scrollBar: true,
		onLeave: function(index, nextIndex, direction) {
			if (check_direction(index, nextIndex, direction) == false) {
				return false;
			}
			return true;
		},
	});
});
</script>

<style>
	body {
		overflow: hidden !important;
	}
</style>
Внимание!
Использование горизонтального скролла прячет плашку Made On Tilda, что запрещено правилами. Вы можете использовать горизонтальный скролл только в случае наличия платной подписки на год с возможность отключения плашки.

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

2) Создаем блоки, которые мы будем использовать.

3) Добавляем в конце страницы блок Другое -> T123 HTML-код и вставляем в него код, который находится ниже.

4) В коде есть несколько отметок, где нужно ввести данные своих блоков или настройки для скролла. Они выглядят вот так:
/*****************************************/
/****************Часть 1*****************/
/*****************************************/

4.1) В части 1 нам нужно указать id первого и последнего блока, которые мы создавали в первом шаге.
var sections = $("#rec109090577, #rec109090584");

4.2) А так-же, id всех блоков, которые будут отображаться.
var sliders = ["#rec109090579, #rec109090580", "#rec109090581 ,#rec109090582"];

5) В части 2 можно указать дополнительные настройки:

// Скорость скролла
scrollingSpeed: 600,

// Анимация
// Можно заменить "easeInOutCubic" на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: "easeInOutCubic",

// Управление клавиатурой
keyboardScrolling: true,

// Стрелки управления на горизонтальном скролле
controlArrows: true,

// Скролл с последнего экрана переводит на первый экран
loopBottom: true,

// Якорные ссылки на страницу.
// Вы можете на любом экоране добавить кнопку, с ссылкой #nav/2, при нажатии на неё пользователь попадет на третий экран.
// Так-же, можно скопировать ссылку mysite.com/#nav/2 и при переходе на неё, пользователь попадет сразу на третий экран.
// Почему на четвертый экран?
// У первого экрана будет ссылка mysite.com/#nav
// У второго экрана будет ссылка mysite.com/#nav/1
// У третьего экрана будет ссылка mysite.com/#nav/2
// Так-же, вместо nav вы можете написать что-нибудь другое.
anchors:['', 'nav'],
Горизонтальный скролл
<!-- Тильдошная горизонтальный скролл для Тильды -->
<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>
function check_direction(t,e,i){var n=$($(".section").get(t-1)).find(".fp-slide").length,f=-1;if(n){if($($(".section").get(t-1)).find(".fp-slide").each(function(t,e){$(e).hasClass("active")&&(f=t+1)}),"down"==i&&f<n)return $.fn.fullpage.moveSlideRight(),!1;if("up"==i&&1<f)return $.fn.fullpage.moveSlideLeft(),!1}return("up"!=i||$($(".section").get(t-1)).prev().find(".t-rec").attr("id")!=$(".section").first().find(".t-rec").attr("id"))&&(("down"!=i||$($(".section").get(t-1)).next().find(".t-rec").attr("id")!=$(".section:not(.label)").last().find(".t-rec").attr("id"))&&void 0)}

$(document).ready(function() {
	/*************************************************/ 
	/********************Часть 1**********************/ 
	/*************************************************/
	// Указываем технические блоки
	var sections = $("#rec113654996, #rec113655002");
	// Указываем отображаемые слайды
	var sliders = ["#rec113654997, #rec113654998, #rec113654999, #rec113655000, #rec113655001"];

	sections.wrap("<div class='section'></div>");
	sliders.forEach(function(s){
		let parents = $(s).wrap("<div class='slide'></div>");
		parents.parent().wrapAll("<div class='section'></div>");
	})
	$(".section").wrapAll("<div id='fullpage'></div>");


	$($(".section").get(1)).addClass("active");
	window.page = $('#fullpage').fullpage({
		/*********************************************/	
		/*****************ЧАСТЬ 2*********************/
		/*********************************************/
		scrollingSpeed: 600, 

		// Эту часть не трогаем
		css3: true,
		scrollBar: true,
		onLeave: function(index, nextIndex, direction) {
			if (check_direction(index, nextIndex, direction) == false) {
				return false;
			}
			return true;
		},
	});
});
</script>

<style>
	body {
		overflow: hidden !important;
	}
</style>
1) Создаем блоки, которые мы будем использовать в вертикальном скролле.

2) Добавляем в конце страницы блок Другое -> T123 HTML-код и вставляем в него код, который находится ниже.

3) В коде есть несколько отметок, где нужно ввести данные своих блоков или настройки для скролла. Они выглядят вот так:
/*************************************/
/*************Часть 1****************/
/*************************************/

3.1) В части 1 нам нужно указать id всех блоков, которые будут отображаться.
var sections = $("#rec109090577, #rec109090584, #rec109090585, #rec109090586");

4) Если у вас на сайте внизу есть плашка Made On Tilda, в части 2 нужно добавить этот код. В противном случае, ваш аккаунт могут забанить. Работает только с стандартной плашкой.
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)

5) В части 3 можно указать дополнительные настройки:

// Скорость скролла
scrollingSpeed: 600,

// Анимация
// Можно заменить "easeInOutCubic" на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: "easeInOutCubic",

// Управление клавиатурой
keyboardScrolling: true,

// Стрелки управления на горизонтальном скролле
controlArrows: true,

// Скролл с последнего экрана переводит на первый экран
loopBottom: true,

// Скролл с последнего экрана переводит на первый экран
loopTop: true,

// Якорные ссылки на страницу.
// Вы можете на любом экране добавить кнопку, с ссылкой #About, при нажатии на неё пользователь попадет на экран, который отмечен как About.
// Так-же, можно скопировать ссылку mysite.com/#about и при переходе на неё, пользователь попадет сразу на экран About.
anchors:['Intro', 'About', 'Shop', 'Contacts'],
Вертикальный скрол
<!-- Тильдошная вертикальный скролл для Тильды -->
<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() {
	/*********************************************/
	/*****************ЧАСТЬ 1*********************/
	/*********************************************/
	// Указываем id блоков
	var sections = $("#rec106962189, #rec106962736, #rec106964636, #rec106962218");

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

	/*********************************************/
	/*****************ЧАСТЬ 2*********************/
	/*********************************************/
	
	
	window.page = $('#fullpage').fullpage({
		/*********************************************/
		/*****************ЧАСТЬ 3*********************/
		/*********************************************/


		// Эту часть не трогаем
		css3: true,
		scrollBar: true,
	});
});
</script>
<style>
	body {
		overflow: hidden !important;
	}
</style>
Есть вопросы?
comments powered by HyperComments
Вот что есть еще
Made on
Tilda