Drop Effect

Для использования эффекта Drop необходимо подключить библиотеку fullPage.js и её CSS-стили. После этого на контейнер с секциями страницы применяется метод инициализации с указанием эффекта в опциях:

new fullpage('#fullpage', {
    licenseKey: 'YOUR_KEY_HERE',
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
    navigation: true,
    scrollingSpeed: 700,
    dragAndMove: true,
    dragAndMoveKey: 'SHIFT',
    dropEffect: true, // включение Drop Effect
    dropEffectOptions: {
        perspective: 1000, // глубина эффекта
        rotate: '45deg'    // угол поворота секции при выпадении
    }
});

Ключевые моменты:

  • dropEffect: true активирует эффект выпадения секций.
  • Параметры в dropEffectOptions позволяют контролировать визуальное восприятие: perspective задаёт глубину, а rotate — угол поворота.
  • Эффект работает только при вертикальном скролле.

Структура HTML для Drop Effect

Стандартная структура секций fullPage.js используется без изменений:


    
Секция 1

    
Секция 2

    
Секция 3

    
Секция 4

Для достижения плавного эффекта рекомендуется:

  • Использовать фиксированную высоту для каждой секции (100vh).
  • Минимизировать внутренние анимации, которые конфликтуют с эффектом выпадения.
  • Добавлять визуальные элементы с постепенной прозрачностью или масштабом для усиления ощущения глубины.

Настройка глубины и анимации

Drop Effect работает с трёхмерной перспективой. Важные параметры:

  1. Perspective Определяет расстояние до “камеры”. Меньшие значения создают более выраженный эффект падения, большие — более мягкий.

    dropEffectOptions: {
    perspective: 800
}

  2. Rotate Задаёт угол наклона секции при выпадении. Можно использовать отрицательные значения для обратного вращения.

    dropEffectOptions: {
    rotate: '-30deg'
}

  3. Timing и скорость scrollingSpeed и CSS-переходы секций влияют на восприятие эффекта. Рекомендуется синхронизировать скорость скролла с анимацией поворота, чтобы секции не “висели” в середине движения.

Применение кастомных анимаций внутри секций

Drop Effect можно сочетать с анимациями внутренних элементов секций через CSS или библиотеку GSAP:

.section h1 {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

.fp-section.active h1 {
    opacity: 1;
    transform: translateY(0);
}
  • Класс .fp-section.active применяется к видимой секции.
  • Эффект Drop при этом создаёт ощущение, что элементы “выпадают вместе с секцией”.

Управление эффектом через события fullPage.js

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

new fullpage('#fullpage', {
    dropEffect: true,
    dropEffectOptions: { perspective: 1000, rotate: '30deg' },
    onLeave: function(origin, destination, direction){
        console.log(`Переход из секции ${origin.index} в секцию ${destination.index}`);
    },
    afterLoad: function(origin, destination, direction){
        // Инициализация анимаций внутри секции после полного выпадения
        gsap.to(destination.item.querySelectorAll('h1, p'), {opacity: 1, y: 0, stagger: 0.2});
    }
});
  • onLeave позволяет управлять эффектами при выходе из секции.
  • afterLoad используется для запуска анимаций, синхронизированных с эффектом выпадения.

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

Drop Effect создаёт 3D-анимацию, что может нагрузить процессор и GPU. Рекомендуется:

  • Ограничивать количество активных секций на странице.
  • Использовать простую графику и минимизировать heavy DOM-элементы.
  • При необходимости отключать эффект на мобильных устройствах:
responsiveWidth: 768,
dropEffect: window.innerWidth > 768
  • Проверять плавность анимаций в разных браузерах, особенно Chrome, Safari и Firefox.

Комбинация с другими эффектами fullPage.js

Drop Effect можно совмещать с:

  • AutoScrolling — для плавного вертикального скролла.
  • Parallax — элементы внутри секции создают эффект глубины.
  • DragAndMove — позволяет пользователю “тянуть” секции, усиливая впечатление 3D.

Пример комбинации:

new fullpage('#fullpage', {
    autoScrolling: true,
    dragAndMove: true,
    dropEffect: true,
    dropEffectOptions: { perspective: 900, rotate: '20deg' },
    parallax: true,
    parallaxOptions: { type: 'reveal', percentage: 50 }
});

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

Оглавление