如何制作动画A/B测试的详细指南

前端小工
1,113 阅读4分钟

最近，我们推出了有史以来第一个A/B测试的动画指南，它被放在了HN主页的顶部（Yay！）

在这篇文章中，我将介绍我如何使用HTML5和JS创建该页面的过程。让我们开始吧!

设置东西

我搜索了一些现有的视差滚动JS脚本，发现了Skrollr.js，这让我的工作变得小菜一碟!如果你打算创建自己的视差滚动页面，那么我建议你使用这个库。除此以外，我还使用了scrollTo.js和mousewheel.js来处理滚动。

另外，我想让页面中的图片在视网膜屏幕上看起来更清晰，所以我使用了RetinaJS的一个小LESS混合器，以确保视网膜屏幕上的图片能以2倍的速度显示。

开始使用

在看了一些Skrollr的例子后，我准备开始建立这个页面了。Skrollr最棒的地方在于它能自动为你设置，还能处理移动设备上的视差滚动。

现在，我保存了所有图片的两个版本（1x和2x，用于视网膜），并搜索了一个好的漫画字体。该页面上的每张幻灯片都是一些文本和图像元素的混合体。我给了每张幻灯片一个absolute 定位和100% 宽度和高度。此外，幻灯片中的每个元素都被fixed 定位，使用opacity 属性使其出现和消失。下面是第一张幻灯片的代码：

  <!-- Slide 1 -->
  <div class=slide id=slide1>
    <div class=bob
      data-0=left: 0%; opacity:0;
      data-1000=left: 50%; opacity:1;
      data-3600=left: 50%; opacity:1;
      data-4800=left: 50%; opacity:0;>
    </div>

    <div class=text
      data-1200=opacity:0; bottom:0%; margin-bottom: 0 
      data-2400=opacity:1; bottom:50%; margin-bottom: -46px
      data-3600=opacity:1; bottom:50%; margin-bottom: -46px; right: 50%
      data-4800=opacity: 0; bottom: 50%; margin-bottom: -48px; right: 0%>

      Meet <strong>Bob</strong>
    </div>
  </div>

Skrollr唯一需要的是data-px 属性，在该属性中传递一些CSS属性。在这里，Bob将在开始时处于0%的左边，具有0的不透明度。现在，如果用户滚动到1000px，他/她会看到Bob的图像从左到中心出现，不透明度越来越高。这就是它的工作原理，你只需要用像素来确定你的动画时间，Skrollr会帮你处理。这里，bob 和text 都是固定的位置。为了使事情有反应，我首先用这个将所有东西定位到中心：

  .element {
    width: 100px; height: 100px;
    left: 50%; top: 50%;
    margin-left: -50px; 
    margin-top: -50px;
  }

之后，我改变了边距，将其完美定位，以便在任何分辨率下都能从中心开始。我对每张幻灯片中的所有元素都做了同样的事情。大多数元素都使用了CSS3的变换功能，而其他元素则使用opacity 属性淡入淡出。

滚动处理

所有这些完成了整个页面的80%。现在，唯一剩下的是滚动处理。我必须确保在每次滚动时，幻灯片应该正确地完成动画，而不应该被留在中间。为了做到这一点，我在每个幻灯片开始/结束的地方创建了滚动位置的检查点。现在，在每次滚动时，我根据滚动方向增加/减少了一个计数器。根据该计数器的当前值，页面被滚动到检查点数组中的位置，在该时间段内，任何其他的滚动事件都被忽略。下面是这个代码：

  var i = 0;
  var checkpoints = [0, 3600, 6000, 11200, 14800, 17200];
  var timer = [0, 1000, 1000, 1500, 1500, 1500];

  function scrollDown() {
    if(i < checkpoints.length - 1 && percentage == 100) {
      i++;
      
      $(html, body).scrollTo(0, checkpoints[i], {
        animation: {
          easing: linear,
          duration: timer[i]
        }
      });
    }
  }

  function scrollUp() {
    if(i > 0) 
      i--;
      
    $htmlAndBody.scrollTo(0, checkpoints[i], {
      animation: {
        easing: linear,
        duration: timer[i]
      }
    });
  }

我还添加了键盘导航，并在页面上放了一些箭头以方便导航。另外，在得到一些非技术人员的评价后，我增加了自动播放的选项，这样所有的懒人仍然能够在不移动手指的情况下观看整个演示：P

这几乎完成了整个页面。最后的补充是为页面创建了一个预加载器，用一个进度条加载前5张幻灯片的图片，然后在后台加载其他的图片。如果你愿意，你可以看一下preloader.js，看看我是如何进行预加载的。另一件事是分享按钮和显示使用PHP检索的计数。

我希望这已经涵盖了所有的内容，但如果你在任何地方被卡住了，那么请随时添加你的评论!:)

avatar
文章
阅读
粉丝