Skip to main content

Эффект «заполняющегося» текста при прокрутке страницы: простой код на CSS и JavaScript

Анимации прокрутки (scroll-based animations) давно стали неотъемлемой частью веб-дизайна. Они делают сайты более интерактивными, помогают привлечь внимание к ключевому контенту и улучшают пользовательский опыт.

Сегодня разберем один из таких эффектов — заполнение цветом текста по мере прокрутки страницы. Это эффект в духе «караоке», когда текст постепенно окрашивается по мере движения вниз.

Как работает эффект?

Основная идея:

  • Мы задаем тексту градиентный фон, в котором половина — цветная, а вторая половина — прозрачная.
  • Фон передвигается в зависимости от положения прокрутки, создавая иллюзию заполнения текста.

Готовый код

Создадим блок с текстом. 

<div class="scroll-text">
  	<span>Создавай красивые эффекты с нуля и прокачивай свои навыки!</span>
</div>

Настроим стили для анимации заполнения: 

.scroll-text {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 85%;
  transform: translate(-50%, -50%);
}
.scroll-text span {
  font-size: 6vw;
  font-weight: bold;
  background: linear-gradient(to right, #3f3f3f 50%, #fff 50%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

const span = document.querySelector('.scroll-text span');

window.addEventListener('scroll', () => {
  const t = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  span.style.backgroundPosition = `${-t * 100}% 0`;
});

Как это работает?

  • CSS задает тексту градиентный фон и обрезает его по форме букв.
  • JavaScript отслеживает положение страницы и смещает фон, создавая эффект анимированного заполнения.

Как адаптировать под свой проект?

  • Можно поменять цвета в linear-gradient на любые другие.
  • Изменить скорость эффекта, экспериментируя с делением window.scrollY.
  • Применить не к тексту, а к другим элементам (например, иконкам, заголовкам или кнопкам).

Вывод

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