Question

我正在为客户建立一个网站，并且他们已经要求让他们销售的产品轮流滚动，类似于您在苹果网站上看到的内容：

http://www.apple.com/watch/

我有一个文件夹，产品的每一帧都在旋转。我想知道解决这个问题的最佳方法是什么。我猜测每个卷轴，图像必须换掉下一个？相当难以解释。

Answer 1

您可能希望将所有图片合并为一个精灵，然后使用background-position更改＆＃34;框架＆＃34;。

以下是使用skrollr实现此目的的一种蛮力方式。我还使用了CSS预处理器，这使得CSS比其他方式更简洁。

萨斯/ SCSS：

$image-width: 240;

.container {
  position: fixed;
  top: 0;

  [class^="sprite-"], [class*=" sprite-"] {
      background-image: url(http://i.imgur.com/vpjGWKb.png);
      background-position: 0 0;
      background-repeat: no-repeat;
      position: absolute;
      width: #{$image-width - 2}px;
      height: 200px;
      display: none;
  }

  @for $i from 0 through 17 {
      .sprite-#{($i + 1)} {
          background-position: unquote(-#{($i * $image-width)}px) 0;
      }
  }
}

.spacer-div {
  margin-bottom: 2000px;
}

HTML：

<div class="container">
  <div class="sprite-1" data-0p="display:block" data-5p="display:none"></div>
  <div class="sprite-2" data-0p="display:none" data-5p="display:block" data-10p="display:none"></div>
  <div class="sprite-3" data-0p="display:none" data-10p="display:block" data-15p="display:none"></div>
  <div class="sprite-4" data-0p="display:none" data-15p="display:block" data-20p="display:none"></div>
  <div class="sprite-5" data-0p="display:none" data-20p="display:block" data-25p="display:none"></div>
  <div class="sprite-6" data-0p="display:none" data-25p="display:block" data-30p="display:none"></div>
  <div class="sprite-7" data-0p="display:none" data-30p="display:block" data-35p="display:none"></div>
  <div class="sprite-8" data-0p="display:none" data-35p="display:block" data-40p="display:none"></div>
  <div class="sprite-9" data-0p="display:none" data-40p="display:block" data-45p="display:none"></div>
  <div class="sprite-10" data-0p="display:none" data-45p="display:block" data-50p="display:none"></div>
  <div class="sprite-11" data-0p="display:none" data-50p="display:block" data-55p="display:none"></div>
  <div class="sprite-12" data-0p="display:none" data-55p="display:block" data-60p="display:none"></div>
  <div class="sprite-13" data-0p="display:none" data-60p="display:block" data-65p="display:none"></div>
  <div class="sprite-14" data-0p="display:none" data-65p="display:block" data-70p="display:none"></div>
  <div class="sprite-15" data-0p="display:none" data-70p="display:block" data-75p="display:none"></div>
  <div class="sprite-16" data-0p="display:none" data-75p="display:block" data-80p="display:none"></div>
  <div class="sprite-17" data-0p="display:none" data-80p="display:block" data-85p="display:none"></div>
  <div class="sprite-18" data-0p="display:none" data-85p="display:block" data-90p="display:none"></div>
  <div class="sprite-1" data-0p="display:none" data-90p="display:block" data-95p="display:block"></div>
</div>

<div class="spacer-div">
</div>

Answer 2

您的页面上可以有多个图像，每个图像都描绘了动画中的一个帧。您可以根据您的要求减少帧数。然后，您可以使用skrollr，scrollorama，scrollmagic等插件，并设置时序淡入/淡出序列中的帧。

滚动动画 - 滚动更改图像，使其显示为旋转

2 个答案: