Zero block0
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block11
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block12
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block2
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block22
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block31
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block32
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block00
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Смешанный скролл если горизонтальный скролл есть на первом или последнем экране.

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) В части 2 можно указать дополнительные настройки:
// Скорость скролла
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 src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/scrolloverflow.min.js"></script> -->
<script>
function check_direction(index, nextIndex, direction) {
	var length = $($(".section").get(index-1)).find(".fp-slide").length;
	var active = -1;
	if (length) {
		$($(".section").get(index-1)).find(".fp-slide").each(function(i, item) {
			if ($(item).hasClass("active")) {
				active = i + 1;
			}
		})
		if (direction == "down" && active < length) {
			$.fn.fullpage.moveSlideRight();
			return false;
		}
		if (direction == "up" && active > 1) {
			$.fn.fullpage.moveSlideLeft();
			return false;
		}
	}
	if (direction == "up" && $($(".section").get(index-1)).prev().find(".t-rec").attr("id") == $(".section").first().find(".t-rec").attr("id")) {
		return false;
	}
	if (direction == "down" && $($(".section").get(index-1)).next().find(".t-rec").attr("id") == $(".section:not(.label)").last().find(".t-rec").attr("id")) {
		return false;
	}
}


$(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>");


	// setTimeout(function(){
	// 	if ($("div").last().parent().parent().parent().attr("id").length == 9) {
	// 		$("div").last().parent().parent().parent().wrap("<div class='section fp-section label'></div>").parent().appendTo("#fullpage").addClass("section")
	// 	}
	// }, 3000)

	$($(".section").get(1)).addClass("active");
	window.page = $('#fullpage').fullpage({
		/*************************************************/
		/*******************Часть 2***********************/
		/*************************************************/
		// Скорость скролла
		scrollingSpeed: 300,
		// easing
		// https://easings.net/ru
		easing: "easeInOutCubic",
		// Стрекли управления на горизонтальном скролле
		controlArrows: false,
		// Управление клавиатурой
		keyboardScrolling: true,

		// scrollOverflow: true,
		// Не трогать
		scrollHorizontally: true,
		loopHorizontal: false,
		loopBottom: false,
		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