Fade Effect

Для использования эффекта fade необходимо подключить библиотеку fullPage.js и соответствующие стили. Важно убедиться, что версия библиотеки поддерживает параметр fadeEffect.

Пример подключения через CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.4/fullpage.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.4/fullpage.min.js"></script>

После подключения и создания базовой структуры HTML для секций можно инициализировать fullPage.js с эффектом fade:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    scrollBar: false,
    fadingEffect: true,
    fadingEffectKey: 'fade', // ключевой параметр для включения fade
    sectionsColor: ['#1abc9c', '#3498db', '#9b59b6'],
});

HTML структура для эффекта Fade

Секции должны быть оформлены в виде контейнера с идентификатором, переданным в конструктор fullPage. Каждая секция — отдельный <section>:

<div id="fullpage">
    <section class="section">Секция 1</section>
    <section class="section">Секция 2</section>
    <section class="section">Секция 3</section>
</div>

Для корректной работы fadeEffect важно, чтобы секции имели одинаковый размер и были позиционированы стандартно (без абсолютного позиционирования, если это не требуется для контента).

Основные параметры эффекта Fade

  • fadingEffect — включает эффект плавного исчезновения/появления секций.
  • fadingEffectKey — ключ для выбора эффекта (по умолчанию 'fade').
  • scrollingSpeed — скорость прокрутки, измеряемая в миллисекундах; влияет на плавность анимации.
  • continuousVertical — если включено, прокрутка переходит от последней секции к первой без резкого перехода.

Пример конфигурации с дополнительными параметрами:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    scrollingSpeed: 700,
    fadingEffect: true,
    fadingEffectKey: 'fade',
    continuousVertical: true,
});

Настройка анимации Fade через CSS

Для более детальной кастомизации можно использовать CSS:

.fp-section {
    transition: opacity 0.8s ease-in-out !important;
}
.fp-section.fp-completely {
    opacity: 1;
}
.fp-section:not(.fp-completely) {
    opacity: 0;
    pointer-events: none;
}

Пояснение ключевых правил:

  • .fp-section — базовый стиль для всех секций. transition управляет плавностью смены прозрачности.
  • .fp-completely — класс, который fullPage.js добавляет к активной секции. Её непрозрачность равна 1.
  • pointer-events: none у неактивных секций предотвращает случайное взаимодействие с элементами, которые скрыты визуально.

Работа с вертикальной и горизонтальной прокруткой

Эффект fade применим как к вертикальным секциям, так и к горизонтальным слайдам. Для горизонтальных слайдов необходимо включить slidesNavigation и использовать контейнеры .slide внутри секций:

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

И инициализация с поддержкой слайдов:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    fadingEffect: true,
    slidesNavigation: true,
});

Переход между слайдами будет плавно использовать fade-анимацию, если включен fadingEffect.

Управление эффектом программно

FullPage.js позволяет программно переключаться между секциями и слайдами с эффектом fade:

// Переход к 3-й секции
fullpage_api.moveTo(3);

// Переход к следующему слайду внутри секции
fullpage_api.moveSlideRight();

При этом fade-анимация будет автоматически применяться к новой секции или слайду, если эффект включен в настройках.

Оптимизация производительности

Эффект fade может создавать дополнительную нагрузку на анимацию, особенно при большом количестве секций или сложном контенте. Рекомендуется:

  • Ограничить количество одновременно видимых элементов с анимацией.
  • Использовать will-change: opacity в CSS для подсказки браузеру о предстоящей анимации.
  • Избегать тяжелых изображений и видео на фадеющихся секциях.

Пример CSS для оптимизации:

.fp-section {
    will-change: opacity;
}

Совмещение с другими эффектами

FullPage.js поддерживает несколько эффектов одновременно. Например, можно комбинировать fade с parallax или scrollOverflow:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    fadingEffect: true,
    parallax: true,
    scrollOverflow: true,
});

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

Итоговые рекомендации

  • Использовать fadingEffect для сайтов с небольшим числом секций или когда акцент на визуальную презентацию.
  • Настраивать scrollingSpeed и CSS-переходы для максимально плавного эффекта.
  • Программное управление секциями через fullpage_api упрощает навигацию и позволяет создавать интерактивные презентации.

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

Оглавление