Топ плагинов jQuery. Плагин jInvertScroll

Дата публикации: 2017-01-23

От автора: приветствую вас, друзья. Начиная с этой статьи мы приступим к знакомству с ТОП плагинов jQuery. Первый плагин, с которым мы познакомимся, это плагин jInvertScroll, который позволяет изменить скролл страницы со стандартного вертикального на горизонтальный.

Итак, друзья, мы с вами рассмотрели в статьях множество тем, касающихся jQuery. В частности, в ряде последних статей мы с вами рассмотрели различные слайдеры и карусели jQuery. В новом цикле статей мы рассмотрим ТОП плагинов jQuery, которые пригодятся на любом сайте и помогут сделать вашу страницу оригинальной и неповторимой.

Первый плагин, который мы рассмотрим, это плагин jInvertScroll, который заменяет вертикальный скролл страницы горизонтальным, т.е. при прокрутке страницы мышью мы увидим движение не сверху вниз, а слева направо. Эффект подойдет далеко не для каждого сайта, но спору нет — эффект действительно оригинальный.

Скачайте плагин с репозитория GitHub или возьмите его из исходников. Теперь подключим файлы плагина и библиотеку jQuery.

<link rel="stylesheet" href="css/jInvertScroll.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.jInvertScroll.js"></script>

Теперь нам потребуется верстка, в которой создадим несколько секций.

<div class="scroll section-1">
		<img src="images/1.png">
	</div>

	<div class="scroll section-2">
		<img src="images/2.png">
	</div>

	<div class="scroll section-3">
		<img src="images/3.png">
		<div class="block block-1">
			блок с контентом
		</div>
		<div class="block block-2">
			блок с контентом
		</div>
		<div class="block block-3">
			блок с контентом
		</div>
		<div class="block block-4">
			блок с контентом
		</div>
	</div>

</div>

</div>

блок с контентом

</div>

блок с контентом

</div>

блок с контентом

</div>

блок с контентом

</div>

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

Для каждой секции зададим следующие обязательные стилевые правила:

.scroll{
	position: fixed;
	bottom: 0;
}

.scroll{

position: fixed;

bottom: 0;

}

Осталось вызвать плагин, передав ему в качестве параметра массив секций (у нас это все секции с классом scroll):

$(function() {
	$.jInvertScroll(['.scroll']);
});

$(function() {

$.jInvertScroll(['.scroll']);

});

Прочие стили Вы можете посмотреть в исходниках к уроку. Если мы все сделали верно, то в результате получим симпатичный параллакс эффект с горизонтальной прокруткой элементов.

На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Метки: jquery