как сделать картинки наискосок которые движутся вперёд

Question

как сделать картинки наискосок которые движутся вперёд

Рейтинг: 1Ответов: 1Опубликовано: 30.04.2023

Как в html и css сделать так чтобы картинки были наискосок и при этом двигались вперёд из далека. Как показано на скрине.

css html анимация

Источник: Stack Overflow на русском

Answer 1

▲ 3

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

body {
  margin: 0;
  min-height: 100vh;
}

.wrapper {
  position: relative;
  display: grid;
  place-items: center;
  height: 100vh; width: 100vw;
  overflow: hidden;
}

.slider {
  position: absolute;
  z-index: -1;
  height: 100%; width: 100%;
  perspective: 200px;
  -webkit-mask: radial-gradient(#0000 5%, #000 90%);
  filter: drop-shadow(0 10px 15px #0008);
  pointer-events: none;
}

.side {
  position: absolute;
  top: 50%;
  height: 100%; width: 100%;
}
.left {
  left: 0; transform-origin: 0 0;
  transform: translateY(-50%) rotateY(60deg);
}
.right {
  right: 0; transform-origin: 100% 0;
  transform: translateY(-50%) rotateY(-60deg);
}

.images {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 100%; width: 100%;
  animation: slide-left 5s linear infinite;
}
.right .images {
  flex-flow: row-reverse nowrap;
  animation: slide-right 6s linear infinite;
}

.images > img {
  --margin: 10vw;
  position: relative;
  margin: 0 0 0 calc(var(--margin) * -1);
  display: block;
  height: auto; width: calc(25vw + var(--margin));
  transform: rotateY(30deg);
  transform-origin: center;
}
.images > img:nth-of-type(even) {
  transform: perspective(4000px) translateZ(-600px) rotateY(30deg);
}

@keyframes slide-left { to { transform: translateX(-100%); } }
@keyframes slide-right { to { transform: translateX(100%); } }

.content {
  display: grid;
  place-items: center;
  width: 100%; height: 50%;
}
.title {
  font: bold 48px/1em sans-serif;
  text-align: center;
  text-shadow: 0 0 20px #fff;
}

<div class="wrapper">
  <div class="slider">
    <div class="side left">
      <div class="images">
        <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
        <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
        <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
        <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
        
        <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
        <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
        <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
        <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
      </div>
    </div>
    <div class="side right">
      <div class="images">
        <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
        <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
        <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
        <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
        
        <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
        <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
        <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
        <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
      </div>
    </div>
  </div>
  <div class="content">
    <div class="title">Moving images<br>in perspective</div>
  </div>
</div>

как сделать картинки наискосок которые движутся вперёд

Ответы