FullPage.js – библиотека JavaScript для создания эффектов прокрутки

FullPage.js – это довольно интересная библиотека, которая позволяет создавать одностраничные сайты со скроллом по секциям. Библиотека разработана таким образом, чтобы быть простой в использовании и настройке. Он включает в себя десятки примеров, отличную документацию и поддержку как сообщества, так и личную.

В этом уроке вы узнаете:

1) Особенности FullPage.js;

2) Как установить библиотеку;

3) Как работать с FullPage.js.

1) Особенности FullPage.js

Библиотека позволяет создавать красивые полноэкранные веб-сайты с прокруткой и слайдами. FullPage.js является известным и востребованным инструментом в веб-разработке. Ему доверяют самые инновационные компании: Google, Sony, BBC, Ebay, British Airways, McDonald’s, Bugatti, Honda.

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

FullPage.js поддерживает современные браузеры, а также некоторые старые браузеры вроде IE8 +. Есть совместимость с версией jQuery 1.7+.

2) Как установить библиотеку?

Для того чтобы FullPage.js работал, необходимо установить себе на устройство библиотеку jQuery. Если эта библиотека еще не подключена у вас, то подключите ее, иначе FullPage.js запустить будет невозможно.

Перейдите на официальный сайт библиотеки https://alvarotrigo.com/fullPage/ и скачайте плагин Fullpage.js. Как только FullPage.js скачается, вы получите архив, который необходимо распаковать. После распаковки в папке останется главный файл библиотеки jquery.fullPage.js. Его нужно скопировать в папку со скриптами создаваемого сайта и подключить.

Из папки vendors можно взять плагин jquery.slimscroll.min.js, который нужен, чтобы создавать вертикальную полосу прокрутки в некоторых блоках сайта.

<script type="text/javascript" src="js/jquery.fullPage.js"></script>

<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>

В архив также помещен файл со стилями, который нужен для корректной работы плагина. Его тоже нужно подключить:

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

FullPage.js установлен!

3) Как работать с FullPage.js?

Для начала необходимо создать HTML-документ для будущего одностраничного сайта. Каждый раздел - это экран, в этом примере добавлено четыре экрана.

Можно сделать и экран со слайдами:

Теперь необходимо добавить JavaScript, чтобы сайт стал интерактивным. Для FullPage.js существуют следующие настройки, которые срабатывают при вызове метода fullpage():

anchors – идентификаторы ссылок, которые позволяют быстро перемещаться к той или иной секции.

menu – идентификатор меню для ссылок выбранной секции.

scrollbar – в этой настройке задается значение true, чтобы показать вертикальную полосу прокрутки браузера.

scrollOverflow – настройка отражает скрол внутри секции, если контент выходит за ее границы.

navigation — если в этой настройке задать значение true, то отразится навигационная панель по секциям.

navigationTooltips – всплывающие подсказки для элементов навигационной панели.

slidesNavigation — если этой настройке задать значение true, то в секции слайдов отразится навигация по слайдам.

navigationPosition – позиция навигации вправо-влево.

slidesNavPosition – позиция навигации вверх-вниз.

loopTop — если в этой настройке задать true, то перемещение по секциям вверх станет бесконечным.

loopBottom – если в этой настройке задать true, то перемещение по секциям вниз станет бесконечным.

loopHorizontal – если в этой настройке задать true, то перемещение слайдов вправо-влево  вверх станет бесконечным.

Ниже вы увидите пример того, как применять настройки FullPage.js в проекте:

В итоге у нас получится одностраничный сайт со слайдами, которые прокручиваются вправо и влево.

Надеемся, что статья была интересной и полезной. Применяйте знания в своей практике и не забудьте подписаться на наш канал!

До скорой встречи!

Ссылка на канал: https://t.me/sitodel