Использование с Angular

Для интеграции fullPage.js в Angular проект необходимо установить библиотеку через npm:

npm install fullpage.js

Также рекомендуется установить типы для TypeScript:

npm install --save-dev @types/fullpage.js

После установки можно подключить стили и скрипт библиотеки в angular.json:

"styles": [
  "node_modules/fullpage.js/dist/fullpage.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/fullpage.js/dist/fullpage.min.js"
]

Это обеспечит корректное применение стилей и функционала fullPage.js в проекте Angular.

Инициализация fullPage.js в компоненте

Создание компонента для страницы с полноэкранной прокруткой:

import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import fullpage from 'fullpage.js';

@Component({
  selector: 'app-fullpage',
  templateUrl: './fullpage.component.html',
  styleUrls: ['./fullpage.component.css']
})
export class FullpageComponent implements AfterViewInit, OnDestroy {
  private fullpageInstance: any;

  ngAfterViewInit(): void {
    this.fullpageInstance = new fullpage('#fullpage', {
      // Настройки fullPage.js
      autoScrolling: true,
      navigation: true,
      anchors: ['firstPage', 'secondPage', 'thirdPage'],
      scrollingSpeed: 700,
      responsiveWidth: 900
    });
  }

  ngOnDestroy(): void {
    if (this.fullpageInstance) {
      this.fullpageInstance.destroy('all');
    }
  }
}
  • AfterViewInit используется для инициализации fullPage.js после отрисовки DOM.
  • OnDestroy обеспечивает корректное удаление экземпляра fullPage.js при уничтожении компонента.

Шаблон компонента

HTML-шаблон должен соответствовать структуре, которую ожидает fullPage.js:

<div id="fullpage">
  <div class="section">Первая секция</div>
  <div class="section">Вторая секция</div>
  <div class="section">Третья секция</div>
</div>

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

<div class="section">
  <div class="slide">Слайд 1</div>
  <div class="slide">Слайд 2</div>
  <div class="slide">Слайд 3</div>
</div>

Настройки и параметры

Полный список доступных опций fullPage.js можно использовать для тонкой настройки поведения:

  • autoScrolling: включает/отключает автоматическую прокрутку.
  • navigation: отображение навигационных точек справа.
  • anchors: массив якорей для каждой секции, позволяет использовать URL с #.
  • scrollingSpeed: скорость анимации прокрутки в миллисекундах.
  • responsiveWidth / responsiveHeight: отключение автоматической прокрутки при определенной ширине/высоте.
  • loopTop / loopBottom: бесконечная прокрутка по кругу.
  • keyboardScrolling: управление через клавиатуру.
  • touchSensitivity: чувствительность свайпов на мобильных устройствах.

Пример использования событий:

this.fullpageInstance = new fullpage('#fullpage', {
  afterLoad: (origin: any, destination: any, direction: any) => {
    console.log(`Перешли на секцию ${destination.index + 1}`);
  },
  onLeave: (origin: any, destination: any, direction: any) => {
    console.log(`Покидаем секцию ${origin.index + 1} в направлении ${direction}`);
  }
});
  • afterLoad вызывается после завершения прокрутки на новую секцию.
  • onLeave срабатывает при уходе со секции.

Динамическое управление секциями

В Angular возможно динамически добавлять или удалять секции через сервисы или *ngFor. После изменения DOM необходимо обновить fullPage.js:

this.fullpageInstance.reBuild();

Метод reBuild() пересчитывает размеры секций и обновляет состояние плагина без полной инициализации.

Интеграция с Angular Router

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

  1. Инициализация fullPage.js в компоненте маршрута через AfterViewInit.
  2. Уничтожение экземпляра при OnDestroy.
  3. Использование anchors для синхронизации URL с текущей секцией:
anchors: ['home', 'about', 'contact']

Теперь при переходе на /#about автоматически активируется соответствующая секция.

Адаптивность и медиазапросы

FullPage.js поддерживает отключение автоматической прокрутки на мобильных устройствах. Настройки responsiveWidth и responsiveHeight позволяют делать прокрутку обычной при малых экранах:

this.fullpageInstance = new fullpage('#fullpage', {
  responsiveWidth: 768,
  responsiveHeight: 600
});

При ширине экрана меньше 768px или высоте меньше 600px включается стандартная прокрутка браузера.

Кастомизация навигации

Можно изменить стиль навигационных точек через CSS или полностью управлять навигацией программно:

fullpage_api.moveTo(3); // Переместиться к третьей секции
fullpage_api.moveSlideRight(); // Переместить слайд вправо

Объект fullpage_api доступен глобально после инициализации, либо через сохранённый экземпляр компонента.

Поддержка слайдов и внутренних элементов

  • Для горизонтальных слайдов используется .slide.
  • Методы для управления слайдами:
fullpage_api.moveSlideLeft();
fullpage_api.moveSlideRight();
  • Возможна комбинация вертикальных секций и горизонтальных слайдов внутри одной страницы, создавая сложные интерактивные интерфейсы.

Советы по производительности

  • Минимизировать количество сложных DOM-элементов внутри секций.
  • Использовать lazy-load для изображений и медиа.
  • При большом количестве секций избегать чрезмерного количества анимаций одновременно.
  • Уничтожать экземпляр fullPage.js при переходе на другие маршруты Angular, чтобы избежать утечек памяти.
Оглавление