afterResize

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

new fullpage('#fullpage', {
    afterResize: function(width, height){
        console.log(`Новое окно: ширина ${width}, высота ${height}`);
    }
});

Параметры

Событие afterResize принимает два параметра:

  1. width – текущая ширина окна браузера после изменения.
  2. height – текущая высота окна браузера после изменения.

Эти параметры позволяют динамически подстраивать контент и изменять стили элементов в зависимости от нового размера окна.

Типичные сценарии использования

  1. Перерасчет размеров слайдов и блоков

При изменении окна некоторые элементы могут выходить за границы секции. afterResize позволяет обновлять их размеры:

afterResize: function(width, height){
    const slides = document.querySelectorAll('.slide');
    slides.forEach(slide => {
        slide.style.height = `${height}px`;
    });
}
  1. Адаптация текста и шрифтов

Можно менять размер шрифта или масштабировать контент в зависимости от ширины окна:

afterResize: function(width, height){
    const headings = document.querySelectorAll('.section h1');
    headings.forEach(h => {
        h.style.fontSize = width > 1200 ? '3rem' : '2rem';
    });
}
  1. Изменение навигации и элементов управления

Например, скрывать стрелки навигации на маленьких экранах:

afterResize: function(width){
    const arrows = document.querySelectorAll('.fp-controlArrow');
    arrows.forEach(arrow => {
        arrow.style.display = width < 768 ? 'none' : 'block';
    });
}

Взаимодействие с другими событиями

  • afterResize срабатывает после onLeave и afterLoad, но только при изменении размеров окна.
  • Если используется responsiveWidth или responsiveHeight, afterResize можно применять для дополнительной настройки адаптивного поведения, например:
new fullpage('#fullpage', {
    responsiveWidth: 900,
    afterResize: function(width){
        if(width < 900){
            fullpage_api.setAutoScrolling(false);
        } else {
            fullpage_api.setAutoScrolling(true);
        }
    }
});

Важные моменты

  • afterResize не срабатывает при изменении размеров секций через CSS без изменения окна браузера.
  • Для плавного эффекта лучше использовать дебаунсинг при работе с тяжелыми вычислениями:
let resizeTimeout;
afterResize: function(width, height){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(() => {
        console.log('Обновление контента после ресайза');
    }, 200);
}

  • Событие может быть использовано совместно с методами fullPage.js, такими как:

    • reBuild() — пересчет размеров всех секций после значительных изменений DOM.
    • setAutoScrolling() — включение/отключение вертикальной прокрутки в зависимости от ширины окна.
    • silentMoveTo() — перемещение на нужную секцию после изменения размера.

Практическая рекомендация

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

Если нужно, могу подготовить подробный пример полной страницы с использованием afterResize, где каждая секция динамически адаптируется под размеры экрана и контент перестраивается плавно. Это будет готовый учебный кейс для fullPage.js.

Хотите, чтобы я сделал такой пример?

Оглавление