Именование секций

В библиотеке fullPage.js каждая секция страницы представлена отдельным HTML-элементом с классом section. Для эффективного управления навигацией, стилизацией и программным взаимодействием важно правильно именовать эти секции. Правильное именование обеспечивает читаемость кода, удобство работы с API fullPage.js и совместимость с расширениями.

Использование атрибутов data-anchor

Одним из основных способов присвоения идентификатора секции является атрибут data-anchor. Он позволяет задавать уникальный якорь, по которому секцию можно будет вызывать через URL или программно через методы fullPage.js.

Пример структуры секций с атрибутами data-anchor:

<div id="fullpage">
  <div class="section" data-anchor="home">Главная</div>
  <div class="section" data-anchor="about">О компании</div>
  <div class="section" data-anchor="services">Услуги</div>
  <div class="section" data-anchor="contact">Контакты</div>
</div>

Особенности работы data-anchor:

  • Значения должны быть уникальными внутри одной страницы. Дублирование приведет к конфликтам при навигации.
  • С помощью якоря можно формировать URL вида site.com/#about, что облегчает прямую ссылку на нужный раздел.
  • Использование латинских символов и дефисов рекомендуется для кроссбраузерной совместимости.

Именование через классы CSS

Класс section является обязательным для каждой секции fullPage.js, но дополнительное именование через CSS-классы упрощает стилизацию и программное выделение секций.

Пример:

<div class="section section-home">Главная</div>
<div class="section section-about">О компании</div>
<div class="section section-services">Услуги</div>
<div class="section section-contact">Контакты</div>

Рекомендации по именованию классов:

  • Использовать префикс, например section-, чтобы избежать конфликтов с другими стилями.
  • Имена должны быть короткими и понятными, отражать содержимое секции.
  • Можно комбинировать с другими классами для визуальной кастомизации (section-about dark-theme).

Идентификация с помощью ID

Каждой секции можно присвоить уникальный атрибут id. Это удобно для программного управления через JavaScript и совместимости с ссылками внутри страницы.

Пример:

<div class="section" id="home">Главная</div>
<div class="section" id="about">О компании</div>

Методы fullPage.js позволяют переключаться на секцию через её id или data-anchor:

new fullpage('#fullpage', {
  anchors: ['home', 'about', 'services', 'contact']
});

// Переход на секцию "about"
fullpage_api.moveTo('about');

Именование слайдов внутри секций

Если секция содержит горизонтальные слайды (slide), им также можно присвоить идентификаторы и якоря. Слайд идентифицируется классом slide и атрибутом data-anchor:

<div class="section" data-anchor="portfolio">
  <div class="slide" data-anchor="web">Веб-разработка</div>
  <div class="slide" data-anchor="design">Дизайн</div>
</div>

Переход к конкретному слайду осуществляется так:

// Перейти на слайд "design" внутри секции "portfolio"
fullpage_api.moveTo('portfolio', 2); // нумерация слайдов начинается с 1

Использование data-anchor для слайдов позволяет строить чистые URL вида site.com/#portfolio/design.

Советы по последовательности и логике имен

  • Последовательность: лучше задавать якоря и идентификаторы в логической последовательности, соответствующей порядку отображения на странице.
  • Единообразие: используйте один стиль именования для всех секций и слайдов, например home, about-us, services.
  • Избегать спецсимволов: только латиница, цифры и дефисы. Пробелы заменять на дефисы.
  • Семантика: имя секции должно отражать её содержание, чтобы облегчить навигацию через API и CSS.

Программное обращение к секциям по именам

FullPage.js предоставляет методы для перехода и получения текущей секции:

// Получение индекса текущей секции
let currentSectionIndex = fullpage_api.getActiveSection().index;

// Получение якоря текущей секции
let currentAnchor = fullpage_api.getActiveSection().anchor;

// Переход на секцию по индексу
fullpage_api.moveTo(3);

// Переход на секцию по якорю
fullpage_api.moveTo('contact');

Присвоение понятных имен через data-anchor и классы делает эти вызовы интуитивными и удобными.

Итоговая структура рекомендаций

  1. Каждая секция — обязательный класс section.
  2. Использовать data-anchor для уникального идентификатора секции.
  3. Дополнительно использовать классы с префиксом для стилизации (section-имя).
  4. Для слайдов внутри секций также использовать data-anchor.
  5. Следить за семантикой и последовательностью имен, избегать спецсимволов и пробелов.
  6. Использовать API fullPage.js для переходов через якоря или индексы, облегчая навигацию и программное управление.

Эти правила обеспечивают структурированность, удобство поддержки и расширяемость интерфейса при работе с fullPage.js.

Оглавление