无限全 CSS 滚动幻灯片

只是为了好玩，我想看看我是否可以在页面上制作一行图像，并在页面上无限地循环播放。 结果发现这并不难。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 无限幻灯片。

这个概念是移动长图形的位置

首先，应该设计图形，使其的一部分重复。 然后，您动画该图像的左侧位置，直到它看起来完成了一个完整的循环（但实际上只是移动到足够远的位置以看起来相同），然后它会迅速回到原始位置并重新开始。

我们只需要一个外部包装器设置为相对定位并隐藏溢出，然后是一个内部容器来动画（即图像）。

<div class="slideshow">
   <div class="images">
      A slideshow of images in here (whatever you want to say for screen readers)
   </div>
</div>

.slideshow {
  position: relative;
  overflow: hidden;
}
.images {
  background: url(slideshow.jpg);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  animation: slideshow 10s linear infinite;
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}

让我们从这个东西中挤出一些更好的性能，牛仔。

上面的代码应该可以正常工作，但根据浏览器/平台/版本/可用资源，它可能会有点卡顿。 我们可以通过告诉浏览器我们将使用 3D 变换（即使我们没有使用）并使用 translateX 而不是 left 来获得更好的性能（至少在 WebKit / Mobile WebKit 中）。

注意：此技巧专门提高了 2D 变换和不透明度变化的性能（您通常不会获得）。 如果我们不切换到使用 translateX，我们将看不到任何好处。

.images {
  ...
   
  /* Hey browser, use your GPU */
  transform: translate3d(0, 0, 0);
}

@keyframes moveSlideshow {  
  100% { 
    -webkit-transform: translateX(-200%);  
  }
}

我不太喜欢我们基本上需要欺骗浏览器以获得更好的性能的事实，但作为 CSS 人员，我想我们已经习惯了这种事情。 我认为我们最初编写它的方式很好，浏览器应该能够识别何时可以更有效地执行并这样做。

添加花哨

在我的幻灯片中，我想除了滚动图像之外，还要做两个额外的酷炫效果。 当您将鼠标悬停在幻灯片上时，它会

1. 加速
2. 从黑白变为彩色

为了加速它，您可能只是想，我们只需减少悬停时的持续时间！ 因此

.slideshow:hover .images {
  animation-duration: 5s;
} 

但这将是卡顿的！ 通过更改动画持续时间，您创建了一个新的时间线，说明哪些属性应该在什么值和时间。 它会计算出这些新值，并立即跳到它们应该在的位置。 它不会只是从它当前的精确位置“加速”。 恐怕我不知道有什么真正可靠的方法可以解决这个问题。

相反，我们只需要调整“加速”的概念。 如果我们将两个幻灯片叠放在一起，每个幻灯片以不同的速度运行，然后在悬停时隐藏/显示最顶层的运行更快的幻灯片，我们可以获得相当不错的“加速”效果。 我们将使用过渡使过渡更平滑。

<div class="slideshow">
   <div class="images-1">
     A slideshow of images in here (whatever you want to say for screen readers)
   </div>
   <div class="images-2">
   </div>
</div>

.slideshow > div {
   ...

   transition: opacity 0.5s ease-out; 
    
   /* Slow */
   animation: moveSlideshow 60s linear infinite;
    
   ...
}

.images-1 {
  /* Fast */
  animation: moveSlideshow 20s linear infinite;
}

.slideshow:hover .images-2 {
   opacity: 0;
}

对于黑白，我们将把最顶层的幻灯片设置为黑白，而较低/更快的幻灯片设置为彩色。 为了节省 HTTP 请求，我们将使它们都使用相同的图像，只是更改背景位置。

.images-1 {
  /* Sprite */
  background-position: 0 200px;

  ...
}

所以应该就可以了！

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 无限幻灯片。

起源

这个想法来自于我们最近制作的 Wufoo Hearts Tech Events 页面，我想展示我们最近参加过的几个活动的图像。 而且，不可否认的是，我只是想玩玩这个想法。