Плавная прокрутка Marquee отображает не все мои изображения. Обрезается после первых 5 изображений - PullRequest
Новая
       42

Плавная прокрутка Marquee отображает не все мои изображения. Обрезается после первых 5 изображений

0 голосов
/ 10 июля 2020

Я пытаюсь сделать плавную полосу прокрутки, которая отображает несколько изображений. Однако после отображения первых нескольких изображений он просто отключается и перезапускается. Ниже представлена ​​демонстрация, чтобы вы получили представление о проблеме. Как видите, изображения с 6 по 10 не отображаются: 

.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.marquee span {
  display: inline-block;
  padding-right: 103px;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(20%);
  }
  to {
    transform: translateX(-600%);
  }
}
<div class="marquee">
  <span>Image 1</span>
  <span>Image 2</span>
  <span>Image 3</span>
  <span>Image 4</span>
  <span>Image 5</span>
  <span>Image 6</span>
  <span>Image 7</span>
  <span>Image 8</span>
  <span>Image 9</span>
  <span>Image 10</span>
</div>

РЕДАКТИРОВАТЬ: С помощью ответа cs1349459 я смог отобразить все изображения от 1 до 10. Однако, если вы проверьте демо-код еще раз, я столкнулся с еще одной проблемой. После последнего изображения 10 у него есть небольшой рывок перед отображением изображения 1. Я хотел знать способ, который мог бы создать плавную прокрутку без этого рывка между изображениями 10 и 1. Между ними не должно быть никакого промежутка.

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Проблема заключалась в том, что пролеты недостаточно перемещались. Ниже приведена фиксированная копия: 

.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.marquee span {
  display: inline-block;
  padding-right: 103px;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-1000%);
  }
}
<div class="marquee">
  <span>Image 1</span>
  <span>Image 2</span>
  <span>Image 3</span>
  <span>Image 4</span>
  <span>Image 5</span>
  <span>Image 6</span>
  <span>Image 7</span>
  <span>Image 8</span>
  <span>Image 9</span>
  <span>Image 10</span>
</div>

Также имейте в виду, что существует целый элемент marqee, хотя я не уверен, что он поддерживается.

Вот его пример используя элемент marqee: 

.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.marquee span {
  display: inline-block;
  margin-right: 103px;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(20%);
  }
  to {
    transform: translateX(-100%);
  }
}
<marquee>
  <span>Image 1</span>
  <span>Image 2</span>
  <span>Image 3</span>
  <span>Image 4</span>
  <span>Image 5</span>
  <span>Image 6</span>
  <span>Image 7</span>
  <span>Image 8</span>
  <span>Image 9</span>
  <span>Image 10</span>
</marquee>

EDIT: Чтобы решить новую проблему, просто измените значения анимации, добавьте еще один оператор CSS для body, и измените анимацию с span s на контейнер: 

body {
  overflow: hidden;
}
.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  animation: marquee 10s linear infinite;
}

.marquee span {
  display: inline-block;
  padding-right: 103px;
}

@keyframes marquee {
  from {
    transform: translateX(75%);
  }
  to {
    transform: translateX(-100%);
  }
}
<div class="marquee">
  <span>Image 1</span>
  <span>Image 2</span>
  <span>Image 3</span>
  <span>Image 4</span>
  <span>Image 5</span>
  <span>Image 6</span>
  <span>Image 7</span>
  <span>Image 8</span>
  <span>Image 9</span>
  <span>Image 10</span>
</div>
0 голосов
/ 10 июля 2020

Как насчет перемещения всего контейнера? Попробуйте мой пример: https://codepen.io/Nargus/pen/xxZzRpw

.marquee {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

.marquee span {
  display: inline-block;
  padding-right: 103px;
}

Также неплохо было бы использовать display: inline-flex; на .marquee

Таким образом, вам не понадобится встроенный блок и nowrap

...