Выделение текста при скролле

ScrollMagic — это JavaScript-библиотека, которая позволяет управлять анимацией и поведением элементов на странице в зависимости от позиции скролла. Одним из наиболее популярных применений является выделение текста при прокрутке, когда пользователь скроллит страницу, а определённые фрагменты текста подсвечиваются или анимируются.

Создание контроллера

Все сцены в ScrollMagic управляются через Controller. Он отвечает за отслеживание позиции скролла и синхронизацию сцен с окнами просмотра.

// Инициализация контроллера
var controller = new ScrollMagic.Controller();

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

Определение сцены для текста

Для того чтобы текст выделялся при достижении определённой позиции скролла, создается сцена (Scene). Сцена содержит три основных параметра:

  • triggerElement — элемент, который запускает сцену при попадании в видимую область.
  • triggerHook — положение триггера на экране (0 — верх, 1 — низ, 0.5 — центр).
  • duration — длина сцены, за которую будет происходить действие. Можно указывать в пикселях или в процентах.

Пример создания сцены для подсветки абзаца:

var scene = new ScrollMagic.Scene({
    triggerElement: "#paragraph1",
    triggerHook: 0.5,
    duration: "50%"
})
.setClassToggle("#paragraph1", "highlight") // добавление класса при активации
.addTo(controller);

Здесь класс highlight будет добавлен к элементу #paragraph1, когда триггер достигнет середины экрана, и снимется, когда сцена завершится.

Множественные элементы и циклы

Если нужно подсвечивать несколько абзацев по мере скролла, можно использовать цикл по NodeList:

var paragraphs = document.querySelectorAll(".text-section");

paragraphs.forEach(function(paragraph) {
    new ScrollMagic.Scene({
        triggerElement: paragraph,
        triggerHook: 0.7,
        duration: "40%"
    })
    .setClassToggle(paragraph, "highlight")
    .addTo(controller);
});

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

Анимации с помощью GSAP

ScrollMagic прекрасно интегрируется с библиотекой GSAP, что позволяет не просто добавлять классы, а создавать плавные анимации текста.

Пример плавного изменения цвета текста:

gsap.registerPlugin();

var paragraphs = document.querySelectorAll(".text-section");

paragraphs.forEach(function(paragraph) {
    var tween = gsap.to(paragraph, { color: "#ff0000", duration: 0.5 });

    new ScrollMagic.Scene({
        triggerElement: paragraph,
        triggerHook: 0.7,
        duration: "50%"
    })
    .setTween(tween)
    .addTo(controller);
});

В этом примере при прокрутке текста цвет плавно изменяется на красный, а после выхода из сцены возвращается к исходному цвету.

Управление состоянием и обратная связь

Для более сложных сценариев можно использовать события сцены: enter, leave, start, end. Например, для изменения состояния меню в зависимости от текущего выделенного текста:

new ScrollMagic.Scene({
    triggerElement: "#paragraph2",
    triggerHook: 0.5
})
.on("enter", function() {
    console.log("Параграф 2 активен");
})
.on("leave", function() {
    console.log("Параграф 2 неактивен");
})
.addTo(controller);

Использование событий позволяет строить динамическую логику подсветки, например, менять активный пункт в боковом меню.

Настройка адаптивности

Для корректной работы на разных экранах важно учитывать:

  • triggerHook: значение может отличаться для мобильных устройств. Например, использовать 0.8 для маленьких экранов, чтобы подсветка запускалась чуть ниже.
  • duration: лучше задавать в процентах ("40%") вместо фиксированных пикселей, чтобы сцена масштабировалась с высотой окна.
  • Можно создавать условные сцены для мобильных и десктопных версий через проверку ширины экрана.

Подсветка нескольких стилей

Помимо изменения цвета, можно комбинировать анимации и классы:

.highlight {
    background-color: yellow;
    font-weight: bold;
    transition: all 0.3s ease;
}

Вместо простого setClassToggle, можно использовать setTween для анимации размера, прозрачности, смещения текста и других свойств.

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

  • Создавать сцены только для видимых элементов, чтобы не перегружать DOM.
  • Использовать duration: 0 для мгновенного выделения, если анимация не нужна.
  • Объединять сцены с одинаковыми триггерами и поведением, чтобы уменьшить количество объектов ScrollMagic.

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

Оглавление