Как создать CSS-анимацию на прокрутке [с примерами] - Web-Global: Связывая миры через веб-технологии
Web-Global

Как создать CSS-анимацию на прокрутке [с примерами]

Пост опубликован 24 февраля 2023 в 18:22 и находится в рубриках HTML&CSS. 314
Поделиться:

CSS-анимация прокрутки — отличный способ оживить скучные и статичные сайты и предоставить читателю более интересный, уникальный и современный опыт.

В этом посте вы узнаете, как запускать CSS-анимацию при прокрутке.(Если вы ищете примеры, ознакомьтесь с нашим списком текстовых анимаций CSS)

И… кто знает? Может быть, в итоге вы создадите потрясающие сайты, подобные этим сайтам с анимацией прокрутки.

Что такое CSS-анимация прокрутки?

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

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

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

Анимация прокрутки с помощью ванильного JavaScript

Ванильный JavaScript, несмотря на его причудливое название, не является библиотекой, это просто старый JavaScript. Так что пусть вас не смущает «причудливое» название.

1. Настройте страницу

Перво-наперво, создайте веб-страницу. Просто простой макет с несколькими разделами.

<section class="container">
  <h2>Caption</h2>
  <div class="text-container">
    <div class="text-box">
      <h3>Section Text</h3>
      <p>Random text</p>
    </div>
    <div class="text-box">
      <h3>Section Text</h3>
      <p>Random text</p>
    </div>
    <div class="text-box">
      <h3>Section Text</h3>
      <p>Random text</p>
    </div>
  </div>
</section>

2. Styling the Page with CSS

Add style attributes to your page and use CSS to define the scroll animation style, Now you need the class, reveal for the sections you are animating and a new class name, active, for when it’s activated.

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 2s all ease;
}
.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

При этом revealэлементы будут скрыты до тех activeпор, пока не будет добавлен класс. Атрибуты transformи transitionопределяют стиль анимации прокрутки, при этом разделы будут исчезать снизу и перемещаться вдоль оси y к вершине. Вы можете проверить это руководство по переходу CSS, если у вас есть какие-либо сомнения.

3. Создайте функции JavaScript для таргетинга на элементы

Нам понадобятся эти функции для присвоения нового имени класса при входе в область просмотра, и нам это нужно для запуска CSS-анимации при прокрутке.

элементы reveal начинаются с нацеливания на все используемыеdocument.querySelectorAll().

function reveal() {
  var reveals = document.querySelectorAll(".reveal")

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

getBoundingClientRect().top дает нам это расстояние от верхней части окна просмотра и window.innerHeightдает нам высоту окна просмотра.

С помощью этого мы можем задать условия, используяfor;

for (var i = 0; i < reveals.length; i++) {
  var windowHeight = window.innerHeight;
  var elementTop = reveals[i].getBoundingClientRect().top;
  var elementVisible = 150;
}

Переменная — windowHeightэто высота области просмотра, elementTopэто расстояние revealэлемента от верхней части точки обзора или длина, которая была прокручена, и elementVisibleэто высота, на которой элемент должен быть показан пользователю.

Вы можете определить, когда элемент прокрутил определенное количество пикселей на странице. Теперь определите функцию, которая отображает элементы, добавляя и удаляя activeкласс. Для этого. используйте ifelseинструкции и . Они зададут условия для запуска анимации

if (elementTop < windowHeight - elementVisible) {
  reveals[i].classList.add("active");
} else {
  reveals[i].classList.remove("active");
}

Полная functionверсия будет выглядеть так;

function reveal() {
  var reveals = document.querySelectorAll(".reveal");
  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;
    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

Now we just pass it into an event listener to run it every time the visitor scrolls the page in any direction.

window.addEventListener("scroll", reveal);

// To check the scroll position on page load
reveal();

Вот и все! Вы достигли анимации прокрутки CSS.

See the Pen Simple Vanilla Js Scroll Animation by Álvaro (@alvarotrigo) on CodePen.

Смотрите демонстрацию

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

4. Анимация с помощью CSS

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

Вот как мы это сделаем в нашем первом разделе:

<section class="container">
    <h2>Caption</h2>
    <div class="text-container reveal fade-bottom">
        <div class="text-box">
            <h3>Section Text</h3>
            <p>Random text</p>
        </div>
        <div class="text-box">
            <h3>Section Text</h3>
            <p>Random text</p>
        </div>
        <div class="text-box">
            <h3>Section Text</h3>
            <p>Random text</p>
        </div>
    </div>
</section>

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

Затем в нашем CSS мы можем назначить им разные анимации, например:

.reveal {
  position: relative;
  opacity: 0;
}
.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}

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

@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

Вы можете изменять transformзначения и animationатрибуты для достижения большего разнообразия.

5. Конечный результат

Смотрите демонстрацию

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

Анимация панели навигации при прокрутке

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

Мы можем использовать наш предыдущий пример и добавить к нему панель навигации. Давайте посмотрим, как это сделать.

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

1. Настройте панель навигации для анимации

Во-первых, HTML:

<nav>
  <a href="#home" class="active">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>

2. Оформите панель навигации с помощью CSS

a {
  text-decoration: none;
}
ul {
  list-style: none;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #42455a;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #00c2cb;
}
header nav a {
  padding: 10px 20px;
  font-size: 2rem;
  color: #e0ffff;
  border-radius: 5px;
  letter-spacing: 0.5px;
}

Затем вы добавляете стиль ссылки, когда анимация становитсяactive, вы можете комбинировать это со hoverстилем, это ваш выбор;

header nav a:hover,
header nav a.active {
  background: #00c2cb;
  color: #42455a;
  transition: 0.5s ease-out;
  letter-spacing: 2px;
}

3. Использование JavaScript для анимации нашей панели навигации

Сначала нацелитесь на все разделы и ссылки;

let section = document.querySelectorAll('section');
let menu = document.querySelectorAll('header nav a');

Как и в первом примере, вы хотите, чтобы панель навигации анимировалась при sectionпрокрутке в поле зрения, для этого создайте onscrollсобытие и используйте forEachдля вызова функции. Для этого нам нужно объявить параметры и задать условие.

window.onscroll = () => {
  section.forEach(i => {
    let top = window.scrollY;
    let offset = i.offsetTop - 150;
    let height = i.offsetHeight;
    let id = i.getAttribute('id');

top является переменной дляscrollY, которая представляет собой длину или количество пикселей, на которые прокручивается окно просмотра. offsetTopэто длина элемента от верхней части окна просмотра. offsetHeightявляется длиной разделов и getAttribute()возвращает значение атрибутов элементов, в данном случае, idразделов.

Далее, условия для выполнения, чтобы ссылки появлялись activeпри прокрутке страницы вниз. Раздел должен находиться внутри области просмотра, поэтому offsetон должен быть меньше длины, которую вы прокручиваете, а также длины от верхней части области просмотра, а длина раздела или элемента должна быть больше длины, которую вы прокрутили;

if (top >= offset && top < offset + height) {
  menu.forEach(link => {
      link.classList.remove('active');
    document.querySelector('header nav a[href*=' + id + ']').classList.add('active');

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

Соедините все это вместе, и это будет выглядеть так;

let section = document.querySelectorAll('section');
let menu = document.querySelectorAll('header nav a');
window.onscroll = () => {
  section.forEach(i => {
    let top = window.scrollY;
    let offset = i.offsetTop - 150;
    let height = i.offsetHeight;
    let id = i.getAttribute('id');
    if (top >= offset && top < offset + height) {
      menu.forEach(link => {
        link.classList.remove('active');
        document.querySelector('header nav a[href*=' + id + ']')
          .classList.add('active');
      });
    }
  });
};

4. Результат: анимация прокрутки CSS + панель навигации!

https://codepen.io/anon/embed/MWvXmja?height=450&theme-id=dark&default-tab=css%2Cresult&user=&slug-hash=MWvXmja&pen-title=&name=cp_embed_3

Смотрите демонстрацию

Вы можете добавить атрибут smoothscroll-behavior, чтобы придать вашему сайту по-настоящему динамичный вид. Внесите изменения в animationtransformатрибуты стиля и посмотрите, что получится. Добавьте atransition-delay, чтобы сделать его еще более эффектным (проверьте, как настроить этот атрибут в этом руководстве по переходу CSS)

Заключение

Эффект анимации прокрутки является популярной анимацией на современных веб-сайтах и придает им современный и более динамичный вид.

Your browser does not support the video tag.

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

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