使用jQuery和CSS3创建基于卷轴的动画3

创建运动是为观众提供有趣且互动的体验的好方法。随着现代网站提供更多的交互性，人们越来越期望简单的网站将提供一定程度的动画 /运动来吸引访客。

>今天，我将概述您可以适应您的Web项目的技术 - 滚动到预定义的区域时触发动画。这些动画将使用CSS变换和CSS过渡创建。我们还将使用jQuery检测何时可见元素并添加/删除适当的类。

对于那些想看到此类示例的人，您可以直接跳到演示。

钥匙要点

可以使用JQuery和CSS3创建基于卷轴的动画，为观众提供交互式体验。当用户滚动进入预定义的区域时，这些动画会触发，从而使其更具吸引力和视觉吸引力。 该技术涉及使用CSS变换和CSS转换，用于检测何时可见元素并添加/删除适当的类。这种方法的考虑包括浏览器的兼容性和速度，现代浏览器支持2D和3D转换以进行平滑动画。

该过程涉及检测视图中的动画元素，挂接到滚动事件，处理调整大小以及计算元素的高度和宽度。当元素位于视口内时，可以触发动画，从而允许为交互式接口链接其他转换或效果。
• >
滚动动画的示例包括从左侧的元素滑动，从底部向上褪色的元素以及多步弹力动画。这些技术可以适用于各种网络项目，例如显示员工资料或课程信息。
为什么在滚动上触发动画？
• >
>我们要在滚动上触发动画的主要原因是，当用户滚动元素视图时，它们就可以激活它们。
>我们可能希望淡入元素，或提供有趣的转换，只有在用户可以实际查看它们时，这些元素才有意义。

使用CSS或用jQuery进行动画？

>每种方法都有利弊。 jQuery（读取JavaScript）允许您动画CSS不使用的内容（例如滚动位置或元素的属性），而CSS动画对于喜欢将所有动画和演示逻辑的开发人员非常有吸引力层。

>我将通过CSS使用转换，但是根据您的情况，总有变量需要考虑。我会考虑以下因素：

>浏览器兼容性

由于我们的解决方案将基于转换，因此我们的浏览器兼容性将仅限于支持2D变换或3D变换的浏览器。

>所有现代浏览器都将支持3D变换，几个旧的旧浏览器（例如Internet Explorer 9和Opera 11.5）将支持2D变换。桌面和移动浏览器的总体支持都是全面的。

如果您使用库的1.x版本，则 jQuery的动画方法可在任何（SANE）浏览器中起作用。 jQuery 2.X删除了对IE8及以下的支持，因此仅在您不需要支持旧浏览器时才使用此功能（Lucky You！）。

速度

>我们想要快速，流畅的动画，尤其是在移动设备方面。因此，它总是最好在可能的情况下使用过渡和转换。

示例将对较旧的浏览器使用3D变换，并使用2D秋季。我们想强制硬件加速度以速度，因此必须进行3D转换（我们将使用Translate3D以及其他导致GPU加速渲染的功能）。

> jQuery的动画方法比GPU辅助转换要慢得多，因此我们将使用jQuery进行活动处理 /计算，而不是为了我们的动画本身（因为我们希望它们尽可能流畅）。

旁注

我们都知道jQuery！== javascript，对吗？好吧，事实证明，将香草JS用于动画可能并不是一个不好的想法。尽管这超出了本教程的范围，但对于那些有兴趣了解更多信息的人来说，这是有关该主题的两篇出色文章：

>

css vs. JS动画：哪个更快？

>

神话破坏：CSS动画与JavaScript
• >
• 现在回到节目…

检测视图中的动画元素

>该技术的总体要点是浏览我们标记为动画的所有元素，然后确定它们当前是否在视口内。让我们介绍如何实现这一目标：

选择器缓存

滚动是一项昂贵的业务。如果您将事件侦听器附加到滚动事件，则每当用户滚动页面时，它都会发射很多次。由于每当用户滚动时，我们将调用我们的维度 /计算功能，因此最好将选择器返回的元素存储在变量中。这被称为选择器缓存，并避免我们一遍又一遍地查询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变量中）。对于这些元素，我们收集其高度及其顶部和底部位置（因此我们知道它在页面上的位置）。

>我们比较每个项目，以查看其底部位置是否大于窗口的顶部位置，但该项目的顶部位置也小于窗口的底部位置。

这是一个视觉示例

计算高度和宽度

在我们的检测功能中，我们需要获取各种元素的高度和位置以正确计算事物，这是我们使用jQuery的高度功能的地方。 对这些高度功能的工作原理

的细分很重要

height（）和width（）

高度（）和width（）函数返回元素的高度或宽度。他们排除了所有填充，边界和边缘。

为了进行完整故障，请访问高度或宽度文档。

inninheight（）和innerwidth（）函数返回元素的高度或宽度，包括其附加填充（但是它不包括边界和边缘）

>

要进行完整的故障，请访问Interheight或InterWidth文档。 >

此外，您还可以通过将真实值传递给函数来指定以包括其边缘。>

要进行完整的故障，请访问外部或外部宽水文档

>滚动动画示例

下面列出的是一系列动画，使用我们讨论过的基础知识。这些示例将寻找动画元素，并在视图中应用活动元素。

> 您要移动的

元素都应具有标准类，例如动画元素，将其位置设置为相对或绝对。此外，如果要创建多个效果，则可以创建相应的类，例如滑左左，可以将其与视图类结合使用。然后，您应该将转换应用于Animation-Element.slide-Left.inview

等类

>从左

滑入

对于我们的第一个示例，我们将在进入视口时从左侧滑动。 我们通过在元素x轴上使用Translate3D来实现这一目标。

>请参阅滚动上的笔CSS动画 - 从sitepoint（@sitepoint）从codepen上滑入。

> 在此示例中，我们使用它来显示员工配置文件，但是您可以重新利用相同的功能以在所需的任何元素中滑动。

>从底部淡入

这次，当用户滚动时，我们将从底部向上淡出元素。我们通过元素Y轴上的翻译3D实现了这一目标。

在此示例中，我列出了有关网格结构中有关主题的课程信息。当用户向下滚动时，每张卡中的每张卡都会淡入并向上移动，并显示有关该课程的信息。

>请参阅滚动上的笔CSS动画 - codepen上的sitepoint（@sitepoint）从底部淡出。

多步弹力动画

在最后的示例中，我们将使用多阶段动画。为此，我们将定义将旋转与翻译结合的自定义密钥帧动画。这种动画可以帮助展示您网站的区域（在此示例中，我们正在展示员工资料）。

>请参阅滚动上的Pen CSS动画 - codepen上的sitepoint（@sitepoint）的多步骤移动。

从这里到哪里？

>

>从这里您可以采用您学到的概念并将其应用于您的项目。

>现在您可以检测到何时在视图中进行元素，您可以链接其他转换或效果来创建交互式接口。例如，当元素进入视口（以及其转换之后）时，您可以转换其他元素，例如标题中的褪色，图像中的缩放等。

>您已经在项目中使用了这些效果吗？还是您认为动画被过度使用并损害用户体验？无论哪种方式，我都希望在评论中收到您的来信。

>>将您的CSS技能带入我们的CSS Master，Tiffany B. Brown的第二版，涵盖CSS动画，过渡，转型等。 经常询问的问题（常见问题解答）关于使用jQuery和CSS3

的基于滚动的动画

>使用jQuery和css3？

创建基于卷轴的动画的基本要求是什么，可以使用JQuery和CSS3创建基于卷轴的动画，您需要对HTML，CSS和JavaScript的基本了解。您还需要在项目中包含jQuery库。 JQuery是一个快速，小且功能丰富的JavaScript库，简化了HTML文档遍历，事件处理和动画。另一方面，CSS3是级联样式语言的最新演变，旨在扩展CSS2.1。它带来了许多期待已久的新颖性，例如圆角，阴影，渐变，过渡或动画。

>

>我如何开始使用jQuery和css3？创建基于卷轴的动画，您首先需要在HTML文件中包含jQuery库。您可以从jQuery网站下载它，也可以直接从内容交付网络（CDN）中包含它。包含jQuery后，您可以在单独的.js文件或HTML文件中的脚本标签中开始编写JavaScript代码。然后，您可以使用jQuery的.aimate（）方法来创建动画。对于CSS3动画，您可以使用KeyFrames和Animation属性。

我可以控制jQuery中基于滚动的动画的速度吗？在jQuery。 .aimate（）方法接受持续时间参数，该参数确定动画将运行多长时间。持续时间以毫秒为单位；较高的值表示动画速度较慢，而不是更快的动画。

>如何使我的基于卷轴的动画更顺畅？

​​

使您的基于卷轴的动画更加顺畅，您可以使用'siele' -out'CSS3过渡 - 定时功能属性的值。该值指定动画应缓慢启动，在中间加速，然后在末尾放慢速度。这可以给您的动画带来更自然和平滑的感觉。

当用户滚动到页面上的某个点时，我如何触发动画？

您可以使用jquery's .scroll（）方法触发事件，当用户在用户滚动到某个点上的某个点时页。在.scroll（）方法中，您可以使用.scrolltop（）方法来获取滚动条的当前垂直位置。然后，您可以使用if语句检查滚动位置是否超出了一定点，如果是的，则触发动画。

我可以使用无jQuery的CSS3动画吗？可以在没有jQuery的情况下使用CSS3动画。 CSS3引入了@KeyFrames规则和动画属性，该属性允许您仅使用CSS创建动画。但是，jQuery可以对动画提供更多的控制和灵活性，例如基于用户互动的动态更改动画属性。

>

>如何停止或暂停JQuery中的基于滚动的动画？您可以使用.stop（）方法在jQuery中停止基于卷轴的动画。此方法可以在所选元素上停止当前运行的动画。要暂停动画，这要复杂得多，因为jQuery并不是本地支持动画暂停。但是，您可以通过使用插件或手动跟踪动画状态和进度来实现这一目标。

>

>如何使用jQuery和css3？

我可以使用jQuery一次动画多个CSS属性吗？ >是的，您可以使用jQuery的.aimate（）方法一次对多个CSS属性进行动画动画。您只需要在.aimimate（）方法的属性对象参数中包含要动画为键值对的属性。

如何确保我的基于滚动的动画在不同的浏览器上工作？>

以上是使用jQuery和CSS3创建基于卷轴的动画3的详细内容。更多信息请关注PHP中文网其他相关文章！