Фото-баннер с бесконечной прокруткой с помощью CSS

ProgramBox

Фото-баннер с бесконечной прокруткой с помощью CSS

Post author:admin
Запись опубликована:15 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я создаю баннер с бесконечной прокруткой с помощью HTML5 и CSS3. Мой код работает, но есть некоторые небольшие задержки.. Я хотел бы эффект плавной прокрутки, это приятнее для пользователя.

Должен быть какой-то способ сделать его более плавным, но не уверен, как это сделать. В любом случае, чтобы добавить плавный эффект к моей анимации с помощью CSS? Или с помощью Javascript?

Вот мой демонстрационный код:

 .photobanner {
  position: relative;
  left: -500px;
  height: 233px;
  width: 4550px;
  margin-bottom: 30px;
}

.photobanner img {
  margin: 0px 25px;
  box-shadow: 2px 2px 8px #8a8a8a;
}

.first {
  -webkit-animation: bannermove 180s linear infinite;
  -moz-animation: bannermove 180s linear infinite;
  -ms-animation: bannermove 180s linear infinite;
  -o-animation: bannermove 180s linear infinite;
  animation: bannermove 180s linear infinite;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-ms-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

 <div class="photobanner">
  <img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>

1. Эта ссылка может помочь вам: medium.com/outsystems-experts /…

2. Вы должны перевести .photobanner div с помощью transform. Не следует анимировать поля

3. @MoorthyG Я просто пытаюсь использовать transform, но результат тот же.

Ответ №1:

Задержка вызвана разницей в выравнивании изображения между началом и концом css-анимации.

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

 const speed = 2; // 2 pixels per frame at 60 frames per second
const banner = document.getElementsByClassName('photobanner')[0];
// build images array
let images = [
...banner.getElementsByTagName('img')
];

// initialize images positions
let rects = images.map((img, index) => {
  const style = getComputedStyle(img);
  const rect = {
    left: index * (350   50),
    top: 0,
    width: 350,
    height: parseInt(style.height, 10)
  };
  return rect;
});

function animate() {
  const l = images.length;
  for (let i = 0; i < l; i  ) {
    const img = images[i];
    const rect = rects[i];
    rect.left -= speed;
    if (rect.left   rect.width < 0) {
        // this image if fully overflowing left, put it at the end of the image list both in position and in images and rects
        const lastRect = rects[rects.length - 1];
        rect.left = lastRect.left   lastRect.width   50;
        images = images.slice(1, l);
        images.push(img);
        rects = rects.slice(1, l);
        rects.push(rect);
        i--;
    }
    // change the actual image style according to new rect value
    img.style.left = rect.left   'px';
  };
  requestAnimationFrame(animate);
}

animate();

 .photobanner {
      position: relative;
      height: 233px;
      width: 100%;
      margin-bottom: 30px;
    }

    .photobanner img {
      top: 0px;
      width: 350px;
      box-shadow: 2px 2px 8px #8a8a8a;
      position: absolute;
    }

 <div class="photobanner">
  <img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>

Ответ №2:

вы можете использовать JavaScript для достижения лучших результатов

 var e = document.getElementById("photobanner");
var x = 0;

function moveBanner() {
  x--;
  e.style.marginLeft = x   "px";

}

setInterval(moveBanner, 60);

 .photobanner {
  position: relative;
  left: -500px;
  height: 233px;
  width: 4550px;
  margin-bottom: 30px;
}

.photobanner img {
  margin: 0px 25px;
  box-shadow: 2px 2px 8px #8a8a8a;
}

 <div class="photobanner" id="photobanner">
  <img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
  <img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>