Типографические эффекты

ScrollMagic — это библиотека для создания анимаций на основе прокрутки страницы. Типографические эффекты позволяют управлять появлением, исчезновением и движением текста, создавая интерактивные и динамичные интерфейсы. Основная логика заключается в связывании сцены (Scene) с DOM-элементом текста и определением триггерной позиции на странице.

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

Каждый эффект начинается с создания сцены. Классический пример:

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

// Создание сцены для анимации текста
var scene = new ScrollMagic.Scene({
    triggerElement: "#header-text", // элемент, с которого начинается анимация
    duration: 300,                  // длина эффекта в пикселях прокрутки
    triggerHook: 0.8                // точка на экране, в которой срабатывает эффект
})
.setClassToggle("#header-text", "visible") // добавление класса при активации
.addTo(controller);

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

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

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

Типичный эффект — постепенное появление текста при прокрутке. Для этого используется комбинация ScrollMagic с CSS-анимациями:

#header-text {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#header-text.visible {
    opacity: 1;
    transform: translateY(0);
}

Сцена ScrollMagic управляет добавлением класса visible, а CSS создаёт плавное появление.

Анимация отдельных слов и букв

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

<h1 id="animated-text">
    <span class="char">H</span>
    <span class="char">e</span>
    <span class="char">l</span>
    <span class="char">l</span>
    <span class="char">o</span>
</h1>

Затем с помощью ScrollMagic можно задать последовательное появление:

var chars = document.querySelectorAll("#animated-text .char");

chars.forEach((char, index) => {
    var scene = new ScrollMagic.Scene({
        triggerElement: char,
        triggerHook: 0.9,
        duration: 0
    })
    .setClassToggle(char, "visible")
    .addTo(controller);
});
.char {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    transition-delay: calc(var(--i) * 0.05s);
}

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

Важно: использование переменной --i позволяет управлять задержкой анимации для каждой буквы, создавая эффект каскада.

Эффекты параллакса для текста

Параллакс-анимация делает текст движущимся относительно прокрутки, создавая глубину. ScrollMagic в сочетании с TweenMax/TweenLite позволяет реализовать это:

var tween = TweenMax.to("#parallax-text", 1, {
    y: -100,
    ease: Power1.easeOut
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#section-parallax",
    triggerHook: 0.5,
    duration: 500
})
.setTween(tween)
.addTo(controller);

Особенности:

  • y: -100 перемещает текст вверх на 100 пикселей по мере прокрутки.
  • TweenMax/TweenLite интегрируется с ScrollMagic через setTween(), обеспечивая плавные анимации.

Анимация появления текста при пролистывании блока

Для длинных текстовых блоков полезно создавать эффект постепенного появления каждой строки:

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

lines.forEach((line, idx) => {
    new ScrollMagic.Scene({
        triggerElement: line,
        triggerHook: 0.85
    })
    .setClassToggle(line, "visible")
    .addTo(controller);
});

CSS:

.line {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease-out;
}

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

Каждая строка появляется отдельно при достижении заданной точки экрана, создавая плавный эффект чтения.

Комбинирование эффектов

ScrollMagic позволяет комбинировать:

  • Появление текста
  • Параллакс движения
  • Последовательное появление букв или слов
  • Изменение цвета или шрифта через классы

Пример комбинированной сцены:

var tween = TweenMax.staggerFrom("#animated-text .char", 0.5, {y:50, opacity:0}, 0.05);

new ScrollMagic.Scene({
    triggerElement: "#animated-text",
    triggerHook: 0.8
})
.setTween(tween)
.addTo(controller);

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

Практические советы

  • Использовать duration для создания непрерывных анимаций текста.
  • Разбивать длинные тексты на отдельные элементы для более гибкого контроля.
  • Комбинировать ScrollMagic с CSS-переходами или TweenMax для сложных движений.
  • Проверять производительность: большое количество отдельных букв или слов может замедлять страницу.
  • Настраивать triggerHook для синхронизации анимации с прокруткой визуально, а не только логически.

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

Оглавление