前言：===
===
这是一个翻译，链接到cssanimation.rocks/scroll-anim。
项目地址：gitee.com/chenuvi/clo...
预览地址：codepen.io/donovanh/pe....
是时候在访问者滚动页面时添加一些动漫了。在本教程中，我设置了一个关于蛋糕的演示页面。我们将使用它来学习如何通过滚动触发动漫并研究有效的方法。
在本教程中，我们将学习如何使用 requestAnimationFrame 和 Intersection Observer 方法来检查当前元素是否在浏览器层中。我们将引入一个新的意志更改属性，并用于确保我们的动漫流畅，我们将将其与一些过渡放在一起，以创建在动漫上触发的滚动。
启动网页
在索引.html文件中，您将找到几个页面的一部分。第一个是标题包含的主要照片和标题的文本。
下面我们有一篇更长的文章。它由片段和图像组成。我已经将类内联照片降低到这些图像。我们使用这些类型的图像并激活它们。
让我们看看它的外观。我们可以看到图像和文字，但没有动漫。
表示滚动
在本教程中，我们将能够使用一些 JavaScript。此视图旨在在页面滚动时检测我们想要动漫的任何特定元素。如果这些特殊触发器中的任何一个可见，我们可以给它们一个特殊的类别，并使用 CSS 来移动或转换它们。
要做到这一点，我们只需要两样东西。当这些元素可见时，我们需要 JavaScript 检查并添加一个类让浏览器支持css3，并且我们需要在之前和之后准备样式元素。
表示滚动
在本教程中，我们将能够使用一些 JavaScript。此视图旨在在页面滚动时检测我们想要动漫的任何特定元素。如果这些特殊触发器中的任何一个可见，我们可以给它们一个特殊的类别，并使用 CSS 来移动或转换它们。
要做到这一点，我们只需要两样东西。当这些元素可见时，我们需要 JavaScript 检查并添加一个类，并且我们需要在之前和之后准备样式元素。
JavaScript
让我们从我们的 JavaScript 开始。在HTML文件的末尾，你会发现一个参考JavaScript文件显示滚动.js。这位于脚本文件夹中。
以前，在构建这样的风暴时，滚动浏览器以查找风暴，然后检测状态页面滚动会很有用。
<code class="hljs language-javascript" lang="javascript">window.addEventListener('scroll', function() {
console.log("Scrolling'");
});
这个可能在个别方面有用，但可恨的是，它有几个大问题。首先是效率。滚动时，控制台.log它看起来很疯狂。如果我们做一些事情，比如剖析DOM树或其他困难的任务，这将大大降低浏览器的成本。它很容易减慢某些速度并使我们的动漫变得混乱。
第二个问题是iOS。在单个手机上滚动仅会导致此滚动触发器在滚动完成时触发。我们希望此功能将在联通设备上可用，因此这是一个很大的失败。
值得庆幸的是，requestAnimationFrame解决了这个问题。通过这些方式，我们可以反复检查页面以查看元素是否可见，同时通过每秒检测数千次来确保浏览器不会过度拥挤。它通过将反弹执行的频率限制为屏幕的刷新率或每秒 60 次来实现此目的。
每秒 60 次可能听起来很多，但对于我们将要做的工作来说，它特别慢，并且不会使浏览器过度拥挤。
为了设置我们的requestAnimationFrame方法，我们将其应用于一个变量。这样，我们可以为尚不支持该功能的浏览器提供回退功能。
var scroll = window.requestAnimationFrame ||
function(callback){ window.setTimeout(callback, 1000/60)};
在这里，我们说滚动应该是window.requestAnimationFrame，或者（如果它不起作用）（使用这个简单的函数，它必须等待1/60秒才能调用反弹）。
接下来，我们将在页面上查找要查找的元素。
var elementsToShow = document.querySelectorAll('.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 方法执行此操作。对于找到的每个滚动显示元素，此循环都会检测它是否在图层中，如果是，则添加一个 Visible 类。否则，它将删除该类。
最后，我们想继续触发这个函数，以便我们可以使用我们之前设置的 requestAnimationFrame 帮助程序并将这个函数作为反弹传递。这意味着一旦requestAnimationFrame允许我们，它将重复此功能并根据需要更新类。
目前，这不会做太多事情。我们需要通过调用循环函数来启动它。
循环（）;
检查它是否在图层中
缺少一件事。
在循环函数中，我们称之为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))
);
}
将动漫添加到图片中
在样式表文件夹的滚动.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 秒，延迟为 1/4 秒，以及指数减速时间函数。我们还使用 opacity 属性使其淡入淡出，使其比转换快一点。
我们正在使用贪睡功能，因此如果访问者缓慢滚动，动漫不会结束，直到照片在屏幕上正确可见。这是一个小调整，有助于页面流畅。
最后，我们添加一个未使用的属性，即 will-change 属性。这是一种告诉浏览器您打算对元素进行动画处理的方法。我们为此属性提供“转换”和“不透明度”值。
完成此操作后，照片将不可见。我们需要添加一些 CSS 来使其可见。
.inline-photo.is-visible {
opacity: 1;
transform: rotateZ(-2deg);
}
我们学到了什么
在本教程中，我们介绍了方便的请求动画帧技巧。
我们编译了一个方便的JavaScript实用程序来检查元素何时在层中并对其应用类。每当我们想在滚动元素上触发动漫时让浏览器支持css3，我们都可以使用此功能。
我们还利用了 will-change 属性，它允许我们提示浏览器将动画化哪些属性。
浏览器支持各种 Web 浏览器中的 CSS 支持
CSS（CascadingStyleSheets）是一种变体工作表语言，用于定义HTML元素的样式，例如字体，颜色，间距等.CSS可以使网页从简单的文本页面看起来更漂亮，并且更容易管理复杂的布局。CSS支持主要取决于浏览器，对CSS的支持因浏览器而异。
互联网浏览器
Internet Explorer（IE）是Google开发的浏览器，其最新版本IE11支持CSS3。IE11 支持大多数 CSS3 属性，如透明度、背景图像、多列布局、文本阴影等，IE11 还支持媒体查询，可以根据不同的屏幕尺寸应用。
火狐
Firefox是由Mozilla开发的开源浏览器，其最新版本Firefox49支持CSS3。Firefox49 支持大多数 CSS3 属性，例如多个背景图像、多个列布局、文本阴影等。Firefox49 还支持媒体查询，可以根据不同的屏幕尺寸应用于不同的样式。
铬
铬
是谷歌开发的浏览器支持css3的浏览器，其最新版本Chrome 53支持CSS3。Chrome 53 支持大多数 CSS3 属性，例如多个背景图像、多个列布局、文本阴影等。Chrome 53 还支持媒体查询，可以根据不同的屏幕尺寸应用于不同的样式。
野生动物园
野生动物园
是苹果开发的浏览器，其最新版本Safari 10支持CSS3。Safari10 支持大多数 CSS3 属性，例如多个背景图像、多列布局、文本阴影等。Safari 10 还支持媒体查询，可以根据不同的屏幕尺寸应用于不同的样式。
歌剧
歌剧
是由Opera软件开发的浏览器，其最新版本Opera43支持CSS3。Opera 43 支持大多数 CSS3 属性，例如多个背景图像、多个列布局、文本阴影等。Opera43 还支持媒体查询支持css3的浏览器，可以根据不同的屏幕尺寸应用于不同的样式。
从前面的介绍中可以看出，主流浏览器支持 CSS3，可以提供更多的样式选择，让网页更美观。该浏览器还支持媒体查询，可以根据不同的屏幕尺寸应用，以便网页在不同的设备上仍然可以很好地显示。
发表评论