JQ — прокрутка экранов, поблочная прокрутка на лэндинге и не только

fullpage scroll jquery plugin - JQ — прокрутка экранов, поблочная прокрутка на лэндинге и не только

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

Плагин написан на JQuery, подключается в несколько строк и имеет специальную HTML разметку, которую подхватывает сам плагин. Итак, поехали:

Подключение плагина fullPage.js

Эффективнее всего подключать javascript перед закрывающим тегом BODY. Первым делом необходимо подключить JQuery, затем библиотеки самого плагина и файл инициализации, который лучше всего сделать отдельным файлом и не размещать скрипт в файлах разметки.

Подключение javaScript модулей

<!-- Библиотека jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="libs/fullpage/jquery.easings.min.js"></script>
<script src="libs/fullpage/scrolloverflow.min.js"></script>
<script src="libs/fullpage/jquery.fullPage.min.js"></script>

//Тот самый код инициализации, который есть у большинства плагинов, который желательно держать в отдельно подключаемом файле.
<script>
$(document).ready(function() {
    $('#fullpage').fullpage();
});  
</script>

Подключение CSS

<!-- CSS файл плагина fullpage -->
<link href="libs/fullpage/jquery.fullPage.css" type="text/css" rel="stylesheet">

HTML разметка

Создатели плагина пошли по пути HTML5 и это очень хорошо. Блок, который будет подчиняться правилу плагина нужно обернуть в id=»fullpage», а экраны обернуть секциями:

<div id="fullpage">
	<section>
		каждый новый экран, который реагирует на скролл колесом помещается между этими тегами
	</section>
	<section>
		каждый новый экран, который реагирует на скролл колесом помещается между этими тегами
	</section>
	<section>
		каждый новый экран, который реагирует на скролл колесом помещается между этими тегами
	</section>
</div>

Демо и файлы: http://alvarotrigo.com/fullPage

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

  1. @Роман пишет:
    07.08.2017 в 07:00

    UX/UI — не, не слышал?))))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *