Текстовая карусель и карусель изображений с использованием CSS?

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

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

Увидев приведенную выше схематическую диаграмму, некоторые студенты не могут не задаться вопросом, а не является ли это очень простой анимацией смещения?

Проведем простой анализ. На первый взгляд кажется, что в смещении есть только элементы transform: translate(), но учтите, что здесь есть две трудности:

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

В этот момент вы можете сделать паузу и немного подумать. Если есть 20 элементов и вам нужно выполнить аналогичную бесконечную карусельную трансляцию, используя для этого CSS, как бы вы это сделали?

Покадровая анимация управляет общим переключением

Во-первых, мне нужно использовать эффект покадровой анимации, также известный как функция плавности шага, используя шаги в animation-timing-function, синтаксис выглядит следующим образом:

{
    /* Keyword values */
    animation-timing-function: step-start;
    animation-timing-function: step-end;
    /* Function values */
    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}

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

Хорошо, пример в начале статьи, предположим, у нас есть такая структура HTML:

<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
  </ul>
</div>

Во-первых, мы реализуем простой макет следующим образом:

Здесь для достижения эффекта карусели, а это произвольное число, мы можем использовать animation-timing-function: steps() :

:root {
  // the number of items
  --s: 6;
  // container's height
  --h: 36;
  // per animation duration
  --speed: 1.5s;
}
.g-container {
  width: 300px;
  height: calc(var(--h) * 1px);
}
ul {
  display: flex;
  flex-direction: column;
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  width: 100%;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--s) * var(--h) * -1px));
  }
}

Не паникуйте, когда увидите несколько CSS-переменных выше, на самом деле это вполне понятно:

1. calc(var(--speed) * var(--s)) : Продолжительность одной анимации * количество вращений, то есть общая продолжительность анимации
2. steps(var(--s)) это номер кадра покадровой анимации, вот steps(6), понятно
3. calc(var(--s) * var(--h) * -1px)) Высота одного контейнера li * количество каруселей, которое на самом деле является общей высотой ul, которая используется для установки конечного значения покадровой анимации

Вышеупомянутый эффект на самом деле выглядит следующим образом:

Если вы добавите overflow: hidden в контейнер, получится вот такой эффект:

Таким образом, мы получаем общую структуру, по крайней мере, весь эффект круговой.

Но поскольку это просто покадровая анимация, можно увидеть только переход, но между каждым кадром нет эффекта анимации перехода. Итак, далее мы должны ввести анимацию движения.

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

Нам нужно использовать tween-анимацию для достижения эффектов динамического переключения.

Этот шаг на самом деле очень прост. Что нам нужно сделать, так это переместить набор данных из состояния A в состояние B, используя transform .

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

<div class="g-container">
  <ul style="--s: 6">
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
  </ul>
</div>
:root {
  --h: 36;
  --speed: 1.5s;
}
ul li {
  height: 36px;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(0, -36px);
  }
}

Очень простая анимация:

Основываясь на вышеупомянутых эффектах, если мы объединим покадровую анимацию, упомянутую в начале, с твиновой анимацией здесь, общее движение ul будет складываться с одной движение ли:

:root {
  --s: 6;
  --h: 36;
  --speed: 1.5s;
}
.g-container {
  width: 300px;
  height: calc(var(--h) * 1px);
}
ul {
  display: flex;
  flex-direction: column;
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  width: 100%;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--s) * var(--h) * -1px));
  }
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(0, calc(var(--h) * -1px));
  }
}

Вы можете получить этот эффект:

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

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

Заполните первый набор данных в шапке в конце

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

Измените наш HTML:

<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!--末尾补一个首条数据-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

Итак, давайте еще раз посмотрим на эффект:

Красивый! Если у вас все еще есть сомнения, мы добавляем overflow: hidden в контейнер, фактический эффект выглядит следующим образом, благодаря дополнительному последнему набору данных вся наша анимация просто идеально связана, идеальный эффект карусели:

Полный код можно посмотреть здесь: CodePen Demo — Vertical Infinity Loop点击预览

Горизонтальная бесконечная карусель

Разумеется, вертикальное вращение реализовано, и горизонтальный эффект такой же.

Кроме того, мы можем заполнить значение переменной CSS в стиле в структуре HTML и передать фактическое количество li, чтобы адаптироваться к различным анимациям в зависимости от количества li:

<div class="g-container">
  <ul style="--s: 6">
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!-- We need to add the first item additionally -->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

Код CSS всей анимации в основном одинаков. Нам нужно только изменить значение transform двух анимаций с вертикального смещения на горизонтальное:

:root {
  --w: 300;
  --speed: 1.5s;
}
.g-container {
  width: calc(--w * 1px);
  overflow: hidden;
}
ul {
  display: flex;
  flex-wrap: nowrap;
   animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(var(--s) * var(--w) * -1px), 0);
  }
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(calc(var(--w) * -1px), 0);
  }
}

Таким образом, мы можем легко преобразовать его в горизонтальный эффект:

Полный код можно посмотреть здесь: CodePen Demo — Горизонтальный бесконечный цикл

Карусель? не проблема

Хорошо, это всего лишь текстовая версия карусели, а если это картинка?

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

Код тот же, поэтому его не будет в списке, просто посмотрите на эффект:

Полный код можно посмотреть здесь: CodePen Demo — Horizontal Image Infinity Loop

Как только вы освоите эту технику, вы сможете применять ее ко многим карусельным эффектам, для которых требуется только упрощенная версия.

Кратко подытожу, очень интересные методики:

1. Используйте покадровую анимацию, чтобы добиться общего эффекта циклической карусели.
2. Используйте анимацию движения для достижения определенных эффектов анимации из состояния A в состояние B.
3. Покадровая анимация с твиновой анимацией для формирования эффекта общей карусели
4. Путем добавления набора данных заголовка в конец HTML-структуры реализуется связь общей анимации
5. Через тег стиля элемента HTML, используя переменные CSS, заполните фактическое количество DOM, участвующих в цикле, вы можете реализовать связь между JavaScript и CSS.

наконец

Хорошо, это конец этой статьи, я надеюсь, что эта статья поможет вам :)

Еще больше замечательных технических статей по CSS собрано в моем Github — iCSS, который будет постоянно обновляться. Добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.