Repolode
Предложить
alvarotrigo

alvarotrigo/fullPage.js

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

Открыть на GitHubСайт
Звёзды
35,360
Форки
7,061
Открытые issues
137
Последний коммит
2 месяца назад

Что это?

fullPage.js позволяет создавать одностраничные сайты с полноэкранной прокруткой: каждая секция занимает всю область просмотра, а переходить между ними можно колесом мыши, свайпом, клавиатурой или с помощью точек навигации. В секциях можно размещать горизонтальные слайдеры. Библиотека также поддерживает якорные ссылки на отдельные секции и слайды, а меню можно связать с активной секцией.

Для инициализации достаточно одного вызова на элементе-обёртке. Параметры позволяют настроить скорость прокрутки, easing, зацикливание, ленивую загрузку медиа и переход к обычной прокрутке на устройствах с шириной или высотой экрана ниже заданного значения. Методы и колбэки, например onLeave и afterLoad, позволяют подключать собственную логику к переходам. Библиотека работает с vanilla JavaScript и jQuery, а также предоставляет обёртки для Vue, React и Angular.

Некоторые расширенные возможности, такие как кинематографические эффекты, параллакс, эффекты слайдов и перетаскивание, распространяются как расширения и требуют лицензионного ключа. Основная библиотека доступна по лицензии GPL-3.0, также можно выбрать коммерческую лицензию.

Ключевые возможности

  • 01Полноэкранные секции, которые фиксируются в области просмотра при прокрутке, свайпе или нажатии клавиш.
  • 02Горизонтальные слайдеры внутри секций.
  • 03Якорные ссылки на секции и отдельные слайды с поддержкой истории браузера.
  • 04Меню и точки навигации, показывающие активную секцию.
  • 05Ленивая загрузка изображений, видео и аудио, а также автовоспроизведение и приостановка встроенных медиа при уходе со страницы.
  • 06Переход к обычной прокрутке, если ширина или высота экрана ниже заданного значения.

Сценарии использования

  • Создание одностраничного маркетингового сайта или страницы продукта с полноэкранными секциями.
  • Создание страниц с повествованием, где контент сменяется секция за секцией.
  • Добавление в прокручиваемую страницу панелей в формате слайд-шоу.
  • Использование в WordPress или проектах на фреймворках через обёртки для Vue, React или Angular.

Быстрый старт

  1. 1

    Установите fullPage.js через npm

    npm install fullpage.js
  2. 2

    Подключите файлы CSS и JavaScript на HTML-странице

  3. 3

    Инициализируйте fullPage.js на элементе-обёртке

Что важно знать

  • Лицензия GPL-3.0: для проприетарного использования требуется отдельная коммерческая лицензия.
  • Для коммерческого использования в проектах с закрытым исходным кодом необходимо приобрести лицензию у поставщика.

Темы

#javascript#fullscreen#scrolling#slider#single-page#animation#frontend-library#fullpage#jquery#mousewheel

Частые вопросы

Что такое fullPage.js?
JavaScript-библиотека для создания сайтов с полноэкранной прокруткой, секциями и горизонтальными слайдами. fullPage.js позволяет создавать одностраничные сайты с полноэкранной прокруткой: каждая секция занимает всю область просмотра, а переходить между ними можно колесом мыши, свайпом, клавиатурой или с помощью точек навигации. В секциях можно размещать горизонтальные слайдеры. Библиотека также поддерживает якорные ссылки на отдельные секции и слайды, а меню можно связать с активной секцией.
fullPage.js можно использовать бесплатно? Какая у него лицензия?
fullPage.js распространяется с открытым исходным кодом под лицензией GPL-3.0. Перед использованием в коммерческих продуктах проверьте условия лицензии.
fullPage.js всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в fullPage.js — 20 сент. 2026 г..
Для чего можно использовать fullPage.js?
Создание одностраничного маркетингового сайта или страницы продукта с полноэкранными секциями. Создание страниц с повествованием, где контент сменяется секция за секцией. Добавление в прокручиваемую страницу панелей в формате слайд-шоу. Использование в WordPress или проектах на фреймворках через обёртки для Vue, React или Angular.
Как установить fullPage.js?
Установите fullPage.js через npm: npm install fullpage.js Подключите файлы CSS и JavaScript на HTML-странице Инициализируйте fullPage.js на элементе-обёртке
Где скачать fullPage.js?
Исходный код и инструкции по установке — на GitHub: https://github.com/alvarotrigo/fullPage.js

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

nolimits4web / swiper

Бесплатный JavaScript-слайдер для мобильных сайтов и приложений с приоритетом сенсорного управления, аппаратным ускорением переходов и без зависимости от jQuery.

Фронтенд и UI#carousel#slider#touch
41,9 тыс.9,6 тыс.TypeScriptMITОбновлён 8 дней назад

NervJS / taro

Открытое мультиплатформенное и мультифреймворковое решение для создания приложения на React или Vue, работающего в WeChat, Alipay и других мини-программах, H5 и React Native.

Фронтенд и UI#cross-platform#mini-program#react
37,7 тыс.+1 за неделю4,9 тыс.TypeScriptOtherАктивно поддерживаетсяОбновлён вчера

bigskysoftware / htmx

Небольшая JavaScript-библиотека без зависимостей: с её помощью HTML-элементы могут отправлять AJAX-, WebSocket- и SSE-запросы через атрибуты.

Фронтенд и UI#html#javascript#ajax
49,6 тыс.+35 за неделю1,8 тыс.JavaScriptOtherАктивно поддерживаетсяОбновлён 3 дня назад

panphora / overtype

Лёгкий редактор Markdown на JavaScript: невидимая текстовая область накладывается на стилизованный предпросмотр, есть необязательная панель инструментов, зависимости от фреймворков нет.

Фронтенд и UI#markdown#editor#javascript
3,7 тыс.+1 за неделю92JavaScriptMITОбновлён позавчера