css3 滚动动画

前言：

======

这是一篇译文，原文链接：cssanimation.rocks/scroll-anim…

项目地址：gitee.com/chenuvi/clo…

预览地址：codepen.io/donovanh/pe…

是时候在访问者滚动页面时添加一些动画了。在本教程中，我设置了一个有关披萨的演示页面。我们将使用它来学习如何通过滚动触发动画，并研究有效的方法。

在这个教程中，我们将学习如何使用 requestAnimationFrame 以及 Intersection Observer 方法以检测当前元素是否在浏览器视口。 我们将会引入一个新的 will-change 属性和使用，以确保我们的动画是平滑的，我们将把这些放在一起的一些过渡创造动画上触发的滚动。

开始HTML

在 index.html 文件你会找到一个几页的部分。 第一个是 header 包含的主要照片和标题的文字。

下面这个我们有一个较长的文章。 它是由的各段和图像。 我已经增加了类 inline-photo 这些图像。 我们会使用这种类型的图像，以及激活他们。

让我们来看看它看起来如何。 我们可以看到的图像和文字，但是没有动画呢。

表示在滚动

这个教程中，我们将可以使用一些JavaScript。 这个想法是为了检查，作为该网页滚动，对于任何特殊的要素，我们希望动画。 如果任何这些特殊因素是可见的，我们可以给他们一个特殊类别和使用CSS动或过渡他们。

要做到这一点，我们只需要两件事情。 我们需要JavaScript检测，并添加一个类之一时，这些要素是可见的，并且我们将需要设立之前和之后的风格上的元素。

表示在滚动

这个教程中，我们将可以使用一些JavaScript。 这个想法是为了检查，作为该网页滚动，对于任何特殊的要素，我们希望动画。 如果任何这些特殊因素是可见的，我们可以给他们一个特殊类别和使用CSS动或过渡他们。

要做到这一点，我们只需要两件事情。 我们需要JavaScript检测，并添加一个类之一时，这些要素是可见的，并且我们将需要设立之前和之后的风格上的元素。

JavaScript

让我们开始与我们的JavaScript。 在结束HTML文件，你会找到一个参考JavaScript文件 show-on-scroll.js. 这是在 scripts 文件夹。

以前，当建立这样的事件我会有用的 scroll 浏览器的事件，然后检查的状态页滚动。

window.addEventListener('scroll', function() {
  console.log("Scrolling'");
});

这个可能在某些方面有用，但可悲的是，这有几个大问题。 首先是效率。 滚动时， console.log 这会像疯了似的。 如果我们做什么都喜欢分析DOM树或其他繁重任务，这将增加大量开销的浏览器。 它可以很容易地慢下来的东西，使我们的动画混乱。

第二个问题是iOS。在某些手机上滚动只会导致滚动完成后触发此滚动触发器。我们希望此功能可以在移动设备上使用，因此这是一个很大的失败。

值得庆幸的是 requestAnimationFrame解决了这些问题。通过这种方法，我们可以反复检查页面以查看元素是否可见，同时通过每秒检查数千次来确保不会使浏览器超载。它通过将回调执行的频率限制为屏幕的刷新率或每秒60次来实现此目的。

每秒60次听起来可能很多，但是对于我们要做的工作来说，它非常慢，并且不会使浏览器超载。

要设置我们的requestAnimationFrame方法，我们将其应用于变量。这样，我们可以为尚不支持该功能的浏览器提供后备功能。

var scroll = window.requestAnimationFrame ||
            function(callback){ window.setTimeout(callback, 1000/60)};

在这里，我们要说的是滚动应该是window.requestAnimationFrame方法，或者（如果无法使用）（使用此简单函数，它需要等待六十分之一秒才能调用回调）。

接下来，我们将在页面上寻找要查找的元素。

var elementsToShow = document.querySelectorAll('.show-on-scroll');

这将查找具有show-on-scroll类的所有元素，并将它们作为可循环通过的数组返回。

让我们设置该循环功能。

function loop() {

  elementsToShow.forEach(function (element) {
    if (isElementInViewport(element)) {
      element.classList.add('is-visible');
    } else {
      element.classList.remove('is-visible');
    }
  });

  scroll(loop);
}

我们从设置功能循环开始。这是我们要遍历所有元素并检查它们是否可见的功能。我们使用forEach方法执行此操作。对于找到的每个“滚动显示”元素，此循环将检查它是否在视口中，如果是，则添加“可见”类。否则，它将删除该class。

最后，我们要继续触发此函数，以便我们使用之前设置的requestAnimationFrame帮助器，并将此函数作为回调传递。这意味着，一旦requestAnimationFrame允许我们，它将重复此功能并根据需要更新类。

就目前而言，这不会做太多事情。我们需要通过调用循环函数来开始它。

loop（）;

检查是否在视口中

缺少一点。
在loop函数中，我们称为isElementInViewport方法。不幸的是，这不是一种浏览器方法，我们必须自己编写一个。这是我从Stack Overflow中抢到的一个方便的工具。

// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0
      && rect.bottom >= 0)
    ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight))
    ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

给图片添加动画

在stylesheets文件夹中的scroll.css文件中，我们找到了照片的一些初始样式。
让我们通过进行一些更改将它们设置为动画。

.inline-photo {
  border: 1em solid #fff;
  border-bottom: 4em solid #fff;
  border-radius: .25em;
  box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
  margin: 2em auto;
  opacity: 0;
  transform: translateY(4em) rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  max-width: 600px;
  width: 90%;
  will-change: transform, opacity;
}

我们希望它们淡入，因此我们将不透明度设置为零。然后，我们还希望这些照片滑动到适当的位置，因此让我们调整变换以将它们向下平移 4em，并使其旋转几度。

接下来，我们设置要在这些照片可见时发生的过渡。我们为转换添加了一个过渡，具有4秒的持续时间，四分之一秒的延迟和指数缓解时间函数。我们还使用opacity属性使它淡入淡出，使其比转换快一点。

我们正在使用延迟功能，以便如果访客缓慢滚动，则动画不会在照片在屏幕上正确可见之前结束。这是一个很小的调整，可帮助页面流畅。

最后，我们添加一个尚未使用的属性，即will-change属性。这是一种告诉浏览器准备对元素进行动画处理的方法。我们为该属性提供值transform和opacity。

完成此操作后，照片将不可见。我们需要添加一些CSS以使其可见。

.inline-photo.is-visible {
  opacity: 1;
  transform: rotateZ(-2deg);
}

我们学到了什么

在本教程中，我们介绍了方便的requestAnimationFrame方法。
我们编写了一个方便的JavaScript实用程序，以检测元素何时在视口中，并对其应用类。每当我们想在滚动元素上触发动画时，我们都可以使用此功能。

我们还利用了will-change属性，该属性使我们可以向浏览器提示哪些属性将被动画化。