Как сделать поэкранный скролл в Tilda. Горизонтальный и вертикальный

Введение

Веб-дизайн является важной частью создания сайта, и конструкторы, такие как Tilda, помогают дизайнерам и новичкам быстро и легко создавать сайты. Tilda является одним из наиболее популярных конструкторов, благодаря своим уникальным функциям и фишкам. Одна из фишек – поэкранный скролл в Tilda, который позволяет пользователям прокручивать содержимое на одной странице, поэтому весь контент сайта может быть представлен на одной странице. В Tilda можно создать как вертикальный, так и горизонтальный поэкранный скролл.

Давайте рассмотрим, как создать поэкранный скролл в Tilda.

Что такое вертикальный поэкранный скролл в Tilda

Вертикальный поэкранный скролл — это стандартный способ отображения контента на веб-страницах, когда пользователи могут прокручивать содержимое вверх или вниз для просмотра. Контент на странице вертикально располагается в виде блоков, которые пользователи могут прокручивать, используя колесо мыши или свайпы на сенсорных устройствах. Этот метод прокрутки наиболее распространен и привычен для пользователей, и он обеспечивает удобный и эффективный способ просмотра контента на веб-страницах. Вертикальный поэкранный скролл может быть использован для отображения текстового содержимого, изображений, видео и других элементов интерфейса, которые умещаются вертикально на странице. Он также может быть эффективным для создания длинных страниц с пошаговой навигацией, где каждый раздел отображается на одной странице.

Что такое горизонтальный поэкранный скролл в Tilda

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

Как сделать вертикальный поэкранный скролл в Tilda

В первую очередь рассмотрим вертикальный поэкранный скролл. Это способ прокрутки, при котором скролл происходит не как на обычных сайтах, а поблочно, то есть с каждым прокручиванием мыши прокручивается целый блок. Для того, чтобы реализовать такой скролл, выполните следующие шаги:

1. Нажмите на кнопку «Все блоки» и создайте zero block.
2. Зайдите в редактор блока и удалите весь стандартный контент.
3. Сохраните изменения и выйдите из зеро блока.
4. Продублируйте зеро блок. У вас должны получиться два одинаковых пустых блока.
5. Первый зеро блок расположите в самом начале страницы, а второй в самом конце. Учтите, что основные блоки, которые будут на вашем сайте, должны находиться строго между двумя пустыми зеро блоками.
6.  Для примера мы создадим три любых блока с любым контентом между пустыми зеро блоками.
7. Если в ваших блоках присутствуют изображения, то вам необходимо выключить у них функцию «lazy load».
8. Каждому блоку задайте 100% высоту.
9. После всех блоков на странице создайте html блок «Т123».
10. Нажмите на кнопку «Контент» и скопируйте туда следующий код:

<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() {

	// Указываем пустые секции
	var sections = $("#rec241453143, #rec241453134");
	// Указываем группы слайдов
	var sliders = ["#rec241454407 ", "#rec241455037", "#rec241455171"];


	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'></div>").parent() .appendTo("#fullpage") .addClass("section") } }, 3000)

	$($(".section").get(1)).addClass("active");
	window.page = $('#fullpage').fullpage({

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


		css3: true,
		scrollBar: true,
		controlArrows: false,
		loopBottom: 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. Скопируйте id двух пустых зеро блоков и вставьте в код в строку «var sections» через запятую в общих кавычках.
2. Скопируйте id основных блоков с контентом и вставьте в код в строку «var sliders» через запятую. Каждый id заключите в отдельные кавычки.
3. Сохраните изменения и опубликуйте страницу.

Вы сделали вертикальный поэкранный скролл блоков на вашем тильда сайте.

Теперь давайте реализуем горизонтальный поэкранный скролл.

Как сделать горизонтальный поэкранный скролл в Tilda

Горизонтальный вертикальный скролл отличается от вертикального лишь тем, что прокручивается не сверху вниз, а слева направо. Принцип точно такой же, как и в случае с вертикальным скроллом:

1. Повторите все шаги от 1 до 9.
2. В html блок скопируйте этот код:

<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() {

	// Указываем технические блоки
	var sections = $("#rec241453143, #rec241453134");
	// Указываем отображаемые слайды
	var sliders = ["#rec241454407, #rec241454650, #rec241455037 "];

	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({

		scrollingSpeed: 600, 


		css3: true,
		scrollBar: true,
		controlArrows: 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. Скопируйте id двух пустых зеро блоков и вставьте в код в строку «var sections» через запятую в общих кавычках.
2. Скопируйте id основных блоков с контентом и вставьте в код в строку «var sliders» через запятую в общих кавычках.

Сохраните изменения и опубликуйте страницу, чтобы насладиться горизонтальным скроллом.

Заключение

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

Добавьте на ваш сайт стильный скролл слайдер! Инструкции здесь или здесь!