Question

我正在使用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>

Answer 1

滞后是由于CSS动画的开始和结束之间的图像对齐方式不同所致。

对齐可能很棘手，因此在进行此类动画处理时，我更喜欢使用javascript + requestAnimationFrame

mappings

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;
    }

Answer 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>

使用CSS的无限滚动图片横幅

2 个答案: