M

MLOG

Русский

Полное руководство по CSS Scroll Timelines — мощной новой технике веб-анимации, связывающей анимацию напрямую с положением прокрутки. Создавайте привлекательный пользовательский опыт.

CSS Scroll Timeline: Анимация в зависимости от положения прокрутки

Анимации, управляемые прокруткой, революционизируют веб-дизайн, предлагая привлекательный и интерактивный пользовательский опыт, выходящий за рамки традиционных статических макетов. CSS Scroll Timelines предоставляют нативное браузерное решение для создания этих анимаций, напрямую связывая прогресс анимации с положением прокрутки элемента. Это открывает мир творческих возможностей для повышения вовлеченности пользователей и повествования в Интернете.

Что такое CSS Scroll Timelines?

CSS Scroll Timelines позволяют управлять прогрессом CSS-анимации или перехода в зависимости от положения прокрутки указанного контейнера прокрутки. Вместо использования традиционных анимаций, основанных на времени, где продолжительность анимации фиксирована, прогресс анимации напрямую связан с тем, насколько далеко прокрутил пользователь. Это означает, что анимация будет приостанавливаться, воспроизводиться, перематываться назад или вперед в прямом соответствии с поведением прокрутки пользователя, создавая более естественный и интерактивный опыт. Представьте себе индикатор выполнения, который заполняется по мере прокрутки страницы вниз, или элементы, которые плавно появляются и исчезают при входе в область просмотра — это те эффекты, которых легко добиться с помощью CSS Scroll Timelines.

Зачем использовать CSS Scroll Timelines?

Ключевые концепции и свойства

Понимание основных концепций и свойств CSS имеет решающее значение для эффективного использования Scroll Timelines:

1. Scroll Timeline

Свойство scroll-timeline определяет контейнер прокрутки, который будет использоваться в качестве временной шкалы для анимации. Вы можете указать именованную временную шкалу (например, --my-scroll-timeline) или использовать предопределенные значения, такие как auto (ближайший родительский контейнер прокрутки), none (без временной шкалы прокрутки) или root (область просмотра документа).

/* Определение именованной временной шкалы прокрутки */
.scroll-container {
  scroll-timeline: --my-scroll-timeline;
}

/* Использование именованной временной шкалы в анимации */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

2. Animation Timeline

Свойство animation-timeline назначает временную шкалу прокрутки анимации. Это свойство связывает прогресс анимации с положением прокрутки указанного контейнера прокрутки. Вы также можете использовать функцию view(), которая создает временную шкалу на основе пересечения элемента с областью просмотра.

/* Связывание анимации с временной шкалой прокрутки */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

/* Использование view() для анимаций, основанных на области просмотра */
.animated-element {
  animation-timeline: view();
}

3. Scroll Offsets

Смещения прокрутки определяют начальные и конечные точки временной шкалы прокрутки, соответствующие началу и концу анимации. Эти смещения позволяют точно контролировать, когда анимация начинается и останавливается в зависимости от положения прокрутки. Вы можете использовать ключевые слова, такие как cover, contain, entry, exit, и числовые значения (например, 100px, 50%), для определения этих смещений.

/* Анимация, когда элемент полностью видим */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: entry 0% cover 100%;
}

/* Начать анимацию на 100px от верха, закончить, когда низ находится на 200px от низа области просмотра */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: 100px exit 200px;
}

4. Scroll Timeline Axis

Свойство scroll-timeline-axis указывает ось, вдоль которой прогрессирует временная шкала прокрутки. Его можно установить в block (вертикальная прокрутка), inline (горизонтальная прокрутка), both (обе оси) или auto (определяется браузером). При использовании `view()` рекомендуется явно указывать ось.

/* Определение оси временной шкалы прокрутки */
.scroll-container {
  scroll-timeline-axis: y;
}

/* С view */
.animated-element {
  scroll-timeline-axis: block;
}

5. Animation Range

Свойство `animation-range` определяет смещения прокрутки (начальные и конечные точки), соответствующие началу (0%) и концу (100%) анимации. Это позволяет сопоставлять определенные положения прокрутки с прогрессом анимации.

/* Сопоставление всего диапазона прокрутки с анимацией */
.animated-element {
  animation-range: entry 0% cover 100%;
}

/* Начать анимацию в середине диапазона прокрутки */
.animated-element {
  animation-range: 50% 100%;
}

/* Использовать значения в пикселях */
.animated-element {
  animation-range: 100px 500px;
}

Практические примеры и случаи использования

Давайте рассмотрим несколько практических примеров использования CSS Scroll Timelines для создания привлекательных анимаций:

1. Индикатор выполнения

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

/* CSS */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 5px;
  background-color: #4CAF50;
  width: 0%;
  animation: fillProgressBar linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 0%;
  animation-fill-mode: forwards;
}

@keyframes fillProgressBar {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <p>... ваш контент здесь ...</p>
</div>

Этот код создает фиксированный индикатор выполнения в верхней части страницы. Анимация fillProgressBar постепенно увеличивает ширину индикатора выполнения с 0% до 100% по мере прокрутки страницы пользователем. animation-timeline: view() связывает анимацию с прогрессом прокрутки области просмотра, а animation-range связывает прокрутку с визуальным прогрессом.

2. Плавное появление изображения

Вы можете использовать Scroll Timelines для создания тонкого эффекта плавного появления изображений при их входе в область просмотра, повышая визуальную привлекательность вашего контента.

/* CSS */
.fade-in-image {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HTML */
<img src="image.jpg" class="fade-in-image" alt="Image">

Этот код изначально скрывает изображение и немного смещает его ниже конечного положения. Когда изображение появляется при прокрутке, анимация fadeIn постепенно увеличивает непрозрачность и перемещает изображение в исходное положение, создавая плавный эффект появления. animation-range указывает, что анимация начинается, когда верхний край изображения входит в область просмотра на 25%, и завершается, когда нижний край входит в область просмотра на 75%.

3. Закрепленные элементы

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

/*CSS*/
.sticky-container {
  height: 200px; /* Настройте по мере необходимости */
  position: relative;
}

.sticky-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  animation: stickyAnimation linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%; /* Настройте диапазон по мере необходимости */
  animation-fill-mode: both;
  z-index: 10;
}

@keyframes stickyAnimation {
  0% {
    position: absolute;
    top: 0;
  }
  100% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ddd; /* Измените цвет, чтобы указать закрепление */
  }
}

/* HTML */
<div class="sticky-container">
  <div class="sticky-element">Мой закрепленный элемент</div>
</div>

В этом примере элемент переходит из position: absolute в position: fixed при входе в верхние 20% области просмотра, создавая плавный эффект «закрепления». Настройте animation-range и CSS-свойства внутри ключевых кадров для настройки поведения.

4. Эффект параллаксной прокрутки

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

/* CSS */
.parallax-container {
  position: relative;
  height: 500px; /* Настройте по мере необходимости */
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.parallax-layer--bg {
  background-image: url("background.jpg");
  animation: parallaxBg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

.parallax-layer--fg {
 background-image: url("foreground.png");
  animation: parallaxFg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

@keyframes parallaxBg {
 to {
    transform: translateY(50px); /* Настройте для скорости параллакса */
 }
}

@keyframes parallaxFg {
 to {
   transform: translateY(100px); /* Настройте для скорости параллакса */
 }
}

/* HTML */
<div class="parallax-container">
  <div class="parallax-layer parallax-layer--bg"></div>
  <div class="parallax-layer parallax-layer--fg"></div>
</div>

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

5. Анимация появления текста

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

/* CSS */
.text-reveal-container {
  position: relative;
  overflow: hidden;
}

.text-reveal {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: textRevealAnimation steps(1) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
  width: 0;
}

@keyframes textRevealAnimation {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="text-reveal-container">
  <span class="text-reveal">Этот текст будет показан по мере прокрутки.</span>
</div>

Этот пример использует функцию времени steps(1) для посимвольного отображения текста. width: 0 изначально скрывает текст, а анимация textRevealAnimation постепенно увеличивает ширину, чтобы раскрыть весь текст. Настройте animation-range для управления началом и концом анимации появления текста.

Совместимость с браузерами и полифиллы

CSS Scroll Timelines — относительно новая технология, и поддержка браузерами все еще развивается. По состоянию на конец 2023 года основные браузеры, такие как Chrome и Edge, предлагают хорошую поддержку. Firefox и Safari активно работают над внедрением этой функции. Крайне важно проверять текущую совместимость с браузерами перед внедрением Scroll Timelines в производственную среду. Вы можете использовать такие ресурсы, как Can I use, чтобы проверить статус поддержки.

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

Соображения доступности

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

Лучшие практики и советы

Вот несколько лучших практик и советов по эффективному использованию CSS Scroll Timelines:

Глобальные соображения для дизайна анимации

При разработке анимации для глобальной аудитории учитывайте следующие моменты:

Заключение

CSS Scroll Timelines предлагают мощный и эффективный способ создания привлекательных и интерактивных веб-анимаций. Связывая прогресс анимации с положением прокрутки, вы можете создавать более динамичный, отзывчивый и удобный для пользователя опыт. Хотя поддержка браузерами все еще развивается, преимущества использования CSS Scroll Timelines — улучшенная производительность, декларативный подход и улучшенный пользовательский опыт — делают их ценным инструментом для современных веб-разработчиков. Экспериментируя со Scroll Timelines, помните о приоритете доступности и учитывайте глобальный контекст вашей аудитории, чтобы создавать по-настоящему инклюзивный и привлекательный веб-опыт.

Осваивайте эту захватывающую новую технологию и открывайте мир творческих возможностей для ваших веб-проектов. Будущее веб-анимации уже здесь, и оно управляется прокруткой!