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

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



Deprecated: Функция WP_Query вызвана с аргументом, который считается устаревшим с версии 3.1.0! Параметр caller_get_posts считается устаревшим. Используйте ignore_sticky_posts. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

Deprecated: Файл Тема без comments.php с версии 3.0.0 считается устаревшим. Альтернативы не предусмотрено. Пожалуйста, включите шаблон comments.php в вашу тему. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078

Один комментарий на «“JQ — прокрутка экранов, поблочная прокрутка на лэндинге и не только”»

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