Т И Л Ь Д О Ш Н А Я

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

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

Вот что есть еще

Модификация

Зависимая анимация

Анимация элементов при наведении или по клику

Эффект

Цветной дым по клику

Полюбившимся многим эффект реалистичного цветного дыма

Модификация

Поэкранный скролл

Ввертикальный, горизонтальный или смешанный поэкранный скролл