创建运动是为观众提供有趣且互动的体验的好方法。随着现代网站提供更多的交互性，人们越来越期望简单的网站将提供一定程度的动画 /运动来吸引访客。
>今天，我将概述您可以适应您的Web项目的技术 - 滚动到预定义的区域时触发动画。这些动画将使用CSS变换和CSS过渡创建。我们还将使用jQuery检测何时可见元素并添加/删除适当的类。
对于那些想看到此类示例的人，您可以直接跳到演示。钥匙要点
>每种方法都有利弊。 jQuery（读取JavaScript）允许您动画CSS不使用的内容（例如滚动位置或元素的属性），而CSS动画对于喜欢将所有动画和演示逻辑的开发人员非常有吸引力层。
>我将通过CSS使用转换，但是根据您的情况，总有变量需要考虑。我会考虑以下因素：
由于我们的解决方案将基于转换，因此我们的浏览器兼容性将仅限于支持2D变换或3D变换的浏览器。
>所有现代浏览器都将支持3D变换，几个旧的旧浏览器（例如Internet Explorer 9和Opera 11.5）将支持2D变换。桌面和移动浏览器的总体支持都是全面的。
如果您使用库的1.x版本，则速度
示例将对较旧的浏览器使用3D变换，并使用2D秋季。我们想强制硬件加速度以速度，因此必须进行3D转换（我们将使用Translate3D以及其他导致GPU加速渲染的功能）。
> jQuery的动画方法比GPU辅助转换要慢得多，因此我们将使用jQuery进行活动处理 /计算，而不是为了我们的动画本身（因为我们希望它们尽可能流畅）。
旁注我们都知道jQuery！== javascript，对吗？好吧，事实证明，将香草JS用于动画可能并不是一个不好的想法。尽管这超出了本教程的范围，但对于那些有兴趣了解更多信息的人来说，这是有关该主题的两篇出色文章：
css vs. JS动画：哪个更快？
>>该技术的总体要点是浏览我们标记为动画的所有元素，然后确定它们当前是否在视口内。让我们介绍如何实现这一目标：
滚动是一项昂贵的业务。如果您将事件侦听器附加到滚动事件，则每当用户滚动页面时，它都会发射很多次。由于每当用户滚动时，我们将调用我们的维度 /计算功能，因此最好将选择器返回的元素存储在变量中。这被称为选择器缓存，并避免我们一遍又一遍地查询DOM。
>请注意变量前面的美元符号。这是指出他们容纳jQuery对象或对象的收集的惯例。
>
接下来，我们创建了聆听滚动事件的事件处理程序。当我们滚动页面时，这将发射。我们将其引用到我们的check_if_in_view函数（我们将在一分钟内获取）。每次滚动事件启动时，都将执行此功能。
>
<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>由于我们正在计算高度和宽度，因此我们需要考虑方向变化以及一般调整大小。
>我们可以更新活动处理程序，以聆听滚动和调整大小的事件。这将使我们的检测功能在调整大小或更改方向时能够起作用。
$<span>window.on('scroll', check_if_in_view);</span>>此外，我们还使用jQuery触发方法在DOM准备就绪后立即触发滚动事件。我们这样做是为了使视图中的任何要动画的元素都在视图中被检测到视图，并且应用动画就好像我们已经滚动一样。
$<span>window.on('scroll resize', check_if_in_view);</span>>此示例的实际检测部分来自以下脚本。
$<span>window.trigger('scroll');</span>让我们分解这里发生的事情。
> Check_IF_IF_IN_VIEW功能最初在DOM准备就绪时，然后每次调整或滚动时。
>我们获得了窗口的当前高度，以及其顶部和底部位置，因此我们知道我们正在寻找的区域。
>我们经历并查找所有将在其中进行动画的项目（保存在$ Animation_Elements变量中）。对于这些元素，我们收集其高度及其顶部和底部位置（因此我们知道它在页面上的位置）。
>我们比较每个项目，以查看其底部位置是否大于窗口的顶部位置，但该项目的顶部位置也小于窗口的底部位置。
这是一个视觉示例
的细分很重要
height（）和width（）
为了进行完整故障，请访问高度或宽度文档。
此外，您还可以通过将真实值传递给函数来指定以包括其边缘。 要进行完整的故障，请访问外部或外部宽水文档
下面列出的是一系列动画，使用我们讨论过的基础知识。这些示例将寻找动画元素，并在视图中应用活动元素。 >从左 对于我们的第一个示例，我们将在进入视口时从左侧滑动。 我们通过在元素x轴上使用Translate3D来实现这一目标。
>
>现在您可以检测到何时在视图中进行元素，您可以链接其他转换或效果来创建交互式接口。例如，当元素进入视口（以及其转换之后）时，您可以转换其他元素，例如标题中的褪色，图像中的缩放等。 >您已经在项目中使用了这些效果吗？还是您认为动画被过度使用并损害用户体验？无论哪种方式，我都希望在评论中收到您的来信。 >>将您的CSS技能带入我们的CSS Master，Tiffany B. Brown的第二版，涵盖CSS动画，过渡，转型等。
经常询问的问题（常见问题解答）关于使用jQuery和CSS3 >我如何开始使用jQuery和css3？创建基于卷轴的动画，您首先需要在HTML文件中包含jQuery库。您可以从jQuery网站下载它，也可以直接从内容交付网络（CDN）中包含它。包含jQuery后，您可以在单独的.js文件或HTML文件中的脚本标签中开始编写JavaScript代码。然后，您可以使用jQuery的.aimate（）方法来创建动画。对于CSS3动画，您可以使用KeyFrames和Animation属性。 >如何使我的基于卷轴的动画更顺畅？ > 如何确保我的基于滚动的动画在不同的浏览器上工作？>inninheight（）和innerwidth（）函数返回元素的高度或宽度，包括其附加填充（但是它不包括边界和边缘）
>
>滚动动画示例元素都应具有标准类，例如动画元素，将其位置设置为相对或绝对。此外，如果要创建多个效果，则可以创建相应的类，例如滑左左，可以将其与视图类结合使用。然后，您应该将转换应用于Animation-Element.slide-Left.inview
等类
>请参阅滚动上的笔CSS动画 - 从sitepoint（@sitepoint）从codepen上滑入。
>
在此示例中，我们使用它来显示员工配置文件，但是您可以重新利用相同的功能以在所需的任何元素中滑动。
>请参阅滚动上的笔CSS动画 - codepen上的sitepoint（@sitepoint）从底部淡出。
从这里到哪里？>使用jQuery和css3？
创建基于卷轴的动画的基本要求是什么，可以使用JQuery和CSS3创建基于卷轴的动画，您需要对HTML，CSS和JavaScript的基本了解。您还需要在项目中包含jQuery库。 JQuery是一个快速，小且功能丰富的JavaScript库，简化了HTML文档遍历，事件处理和动画。另一方面，CSS3是级联样式语言的最新演变，旨在扩展CSS2.1。它带来了许多期待已久的新颖性，例如圆角，阴影，渐变，过渡或动画。
>我可以控制jQuery中基于滚动的动画的速度吗？在jQuery。 .aimate（）方法接受持续时间参数，该参数确定动画将运行多长时间。持续时间以毫秒为单位；较高的值表示动画速度较慢，而不是更快的动画。
使您的基于卷轴的动画更加顺畅，您可以使用'siele' -out'CSS3过渡 - 定时功能属性的值。该值指定动画应缓慢启动，在中间加速，然后在末尾放慢速度。这可以给您的动画带来更自然和平滑的感觉。
当用户滚动到页面上的某个点时，我如何触发动画？您可以使用jquery's .scroll（）方法触发事件，当用户在用户滚动到某个点上的某个点时页。在.scroll（）方法中，您可以使用.scrolltop（）方法来获取滚动条的当前垂直位置。然后，您可以使用if语句检查滚动位置是否超出了一定点，如果是的，则触发动画。>
>如何停止或暂停JQuery中的基于滚动的动画？您可以使用.stop（）方法在jQuery中停止基于卷轴的动画。此方法可以在所选元素上停止当前运行的动画。要暂停动画，这要复杂得多，因为jQuery并不是本地支持动画暂停。但是，您可以通过使用插件或手动跟踪动画状态和进度来实现这一目标。我可以使用jQuery一次动画多个CSS属性吗？ >是的，您可以使用jQuery的.aimate（）方法一次对多个CSS属性进行动画动画。您只需要在.aimimate（）方法的属性对象参数中包含要动画为键值对的属性。
以上是使用jQuery和CSS3创建基于卷轴的动画3的详细内容。更多信息请关注PHP中文网其他相关文章！
