Бесконечная анимация боковой прокрутки изображений - PullRequest
Новая
       165

Бесконечная анимация боковой прокрутки изображений

4 голосов
/ 29 мая 2020

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

Это потому, что я использую translate(-100%).

Если возможно, я бы не хотел зависеть от знания размера изображения или ограничения размера области просмотра, чтобы это работало.

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

 .slideshow {
  height: 150px;
  /*max-width: 800px;*/ /*The width of the page cannot be a problem*/
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.slideshow > div {
  height: 150px;
  width: 2000px; /*I don't want to have to input a width.*/
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

.move > img {
  height: 150px;
}

.slideshow .move {
animation: moveSlideshow 10s linear infinite alternate-reverse;
}

.slideshow .move:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}

@keyframes moveSlideshow {
  0% {
transform: translateX(0%); 
  }
  100% { 
transform: translateX(-100%);  /*The width of the page needs to be taken into consideration*/
  }
}
<div class="slideshow">
  <div class="move">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
 <img src="https://via.placeholder.com/300x150">
  </div>
</div>
Я тоже пробовал использовать: transform: translateX(100%) translateX(-50px);, но не работает.

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

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

Как исправить эту анимацию? (Чтобы включить бесконечную плавную прокрутку или не исчезать из поля зрения)

Edit:

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

@keyframes moveSlideshow {
  0% {
    transform: translateX(0%); 
  }
  100% { 
    -ms-transform: translateX(-100%) translateX(100vw); 
    transform: translateX(calc(-100% + 100vw));  
  }
}

Теперь последнее изображение начинается справа, а первое изображение заканчивается слева. Единственная проблема заключается в том, что скорость воспроизведения анимации изменяется при изменении ширины области просмотра.

1 Ответ

3 голосов
/ 29 мая 2020

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

Тогда легко добиться того, что вы хотите:

Примечание: в исходном состоянии первым элементом перемещения является отображается с выравниванием по левому краю. Второй элемент перемещения находится справа от него и не виден, потому что он вне контейнера.

Мы переместим оба элемента на 100% влево. Первый скроется из поля зрения слева, а в какой-то момент оставит пробел справа. Но второй движется с той же скоростью, поэтому он заполнит пустоту, оставленную первым.

Анимация заканчивается, когда вторая перемещается на 100%, поэтому она отображается на том же месте, что и первая. Теперь анимация запускается снова, и вместо нее отображается первая, но вы не заметите этого изменения. 

.slideshow {
  height: 150px;
  margin: 0 auto;
  position: relative;
  transform: translate3d(0, 0, 0);
  display: flex;
  width: 100%;
  overflow: hidden;
  background-color: blue;
}

.move {
  height: 100%;
  transform: translate3d(0, 0, 0);
  display: flex;
  animation: moveSlideshow 10s linear infinite;
}

.move:nth-child(2) img {
  opacity: 0.4;

}
.move > img {
  height: 150px;
  width: auto;
}


.slideshow:hover .move {
  animation-play-state: paused;
}

@keyframes moveSlideshow {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
    /*The width of the page needs to be taken into consideration*/
  }
}
<div class="slideshow">
  <div class="move">
    <img src="https://via.placeholder.com/400x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/200x150">
  </div>
  <div class="move">
    <img src="https://via.placeholder.com/400x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/300x150">
    <img src="https://via.placeholder.com/200x150">
  </div>
</div>
...