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

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


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

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

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

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

<!-- Библиотека 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>


между тегами HEAD подключаем стили

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


2. Разметка кода

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

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


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


Понравилась статья "JQ - прокрутка экранов, поблочная прокрутка на лэндинге и не только" из раздела Веб разработка » JavaScript? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 1 •  Просмотров: 5828   Дата: 04-сен-2016, 22:03

Похожие статьи

Комментарии


Гости
UX/UI - не, не слышал?))))
(7 августа 2017 07:00) • цитировать • •
b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика