Построчное появление текста

ScrollMagic — это библиотека JavaScript, позволяющая создавать управляемые скроллингом анимации. Для реализации построчного появления текста ключевыми элементами будут сцены (Scenes), контроллеры (Controllers) и работа с CSS-анимациями или библиотекой TweenMax из GreenSock (GSAP).

Настройка контроллера

Контроллер управляет всеми сценами и синхронизирует их с прокруткой страницы. Создание контроллера выполняется следующим образом:

var controller = new ScrollMagic.Controller();

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

Создание сцены для текста

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#line1", // Элемент, при достижении которого сработает анимация
    triggerHook: 0.8,         // Точка на экране, где начинается анимация
    reverse: false            // Анимация не проигрывается обратно при прокрутке вверх
})
.setClassToggle("#line1", "visible") // Добавление CSS-класса для анимации
.addTo(controller);
  • triggerElement — HTML-элемент, с которого начинается сцена.
  • triggerHook — положение на экране, где сцена активируется (0 — верх, 1 — низ).
  • reverse — управляет повторением анимации при скролле вверх.

Подготовка текста к анимации

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

<div class="text-block">
    <p><span class="line">Первая строка текста</span></p>
    <p><span class="line">Вторая строка текста</span></p>
    <p><span class="line">Третья строка текста</span></p>
</div>

CSS для изначального скрытия строк:

.line {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.line.visible {
    opacity: 1;
    transform: translateY(0);
}

При добавлении класса visible строки плавно появляются снизу вверх.

Анимация с задержкой между строками

Чтобы строки появлялись поочередно, используется цикл по элементам с созданием отдельной сцены для каждой строки:

var lines = document.querySelectorAll(".line");

lines.forEach(function(line, index) {
    var scene = new ScrollMagic.Scene({
        triggerElement: line,
        triggerHook: 0.8,
        reverse: false
    })
    .setClassToggle(line, "visible")
    .addTo(controller);
});

Для эффекта последовательности можно добавить различную задержку через CSS-переходы:

.line:nth-child(1) { transition-delay: 0s; }
.line:nth-child(2) { transition-delay: 0.2s; }
.line:nth-child(3) { transition-delay: 0.4s; }

Или использовать GSAP для более гибкой анимации:

lines.forEach(function(line, index) {
    var tween = gsap.fromTo(line, {opacity: 0, y: 20}, {opacity: 1, y: 0, duration: 0.6, delay: index * 0.2});
    
    var scene = new ScrollMagic.Scene({
        triggerElement: line,
        triggerHook: 0.8,
        reverse: false
    })
    .setTween(tween)
    .addTo(controller);
});

Использование временных линий GSAP для сложных эффектов

Если нужно, чтобы несколько строк появлялись синхронно или с более сложным паттерном, применяется Timeline:

var tl = gsap.timeline();
tl.from(".line1", {opacity: 0, y: 20, duration: 0.5});
tl.from(".line2", {opacity: 0, y: 20, duration: 0.5}, "-=0.3"); // перекрытие
tl.from(".line3", {opacity: 0, y: 20, duration: 0.5}, "-=0.3");

new ScrollMagic.Scene({
    triggerElement: ".text-block",
    triggerHook: 0.8,
    reverse: false
})
.setTween(tl)
.addTo(controller);
  • Timeline позволяет объединять несколько анимаций в единую последовательность.
  • Параметр "-=0.3" задает перекрытие анимаций, создавая более динамичный эффект появления текста.

Дополнительные возможности

  • pinning — закрепление блока текста на экране, чтобы анимация происходила в течение прокрутки:
scene.setPin(".text-block");
  • scrub — синхронизация анимации с прокруткой:
scene.setTween(tl).duration(500).setPin(".text-block").addTo(controller);
  • callbacks — события для запуска функций при начале или окончании сцены:
scene.on("enter", function() { console.log("Начало появления текста"); });
scene.on("leave", function() { console.log("Конец анимации"); });

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

  1. Использовать один контроллер для всех сцен.
  2. Минимизировать количество DOM-элементов с отдельными сценами — объединять строки в группы, если это возможно.
  3. Использовать CSS-трансформации (transform, opacity) вместо top или margin, чтобы анимация оставалась плавной.
  4. Применять lazy loading для тяжелых блоков текста, если страница содержит много контента.

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

Оглавление