动画元素让您的基本HTML模板更上一层楼

动画可以将您的网站展示提升到一个新的水平。正确的动画将对您网站的用户体验产生积极影响，加强每次互动并创造令人难忘的体验。另一方面，选择不当的动画可能会破坏体验，让用户感到困惑，并可能会降低性能。

在本文中，我将与您分享一些实用的动画示例和技巧，以使您的基本 html 网页像星星一样闪耀。

对动画进行分类

为了更轻松地使用动画，我首先喜欢对不同的方面进行分类和组织。每个动画将有五个参数，具有一系列潜在值：

1. 类型：单个、组、相关

2. 顺序：顺序，随机，同时

3. 事件：加载、滚动、单击、悬停、调整大小等。

4. 尺寸：小号、中号、大号

5. 重复：不重复，重复

注意：这不是 W3C 标准，这是我个人的系统，以保持清晰。

牢记这些参数将有助于我们制作更好的动画。我们将一一介绍这五件事。之后，我将向您展示如何结合使用 jquery 和 animate 为 Web 上的任何内容制作动画。.css _

1.类型

在某些情况下，您需要为一件事制作动画。

然后有时您需要对分组元素（兄弟元素）进行动画处理，例如：图标、图库中的图像、单行中的列等。

或者您可能需要对相关元素进行动画处理；彼此相关但不是直系兄弟姐妹的人。

 2. 顺序

动画的顺序可以通过动画延迟来控制。延迟可能会计时，以便您的动画按顺序发生。您可能希望事情随机发生，或者您可能希望两个或多个元素同时设置动画。 

3.活动

动画可以发生在网络世界中的任何已知事件上：页面滚动、页面加载、单击、悬停、调整大小等。事件类型无关紧要，只要在正确的动画上计划和执行每个动画即可。在演示中，我们稍后将进行演示，我们将使用页面滚动，当元素进入视口时触发元素上的动画。

4.尺寸

大小是一个相对术语。动画的“大小”可以解释为与其持续时间、物理尺寸或运动值有关。为小元素制作动画的速度可能与为较大元素制作动画的速度不同。这一切都取决于解释，但“大小”对于最终结果来说很重要。  

5.重复

在计划动画时，您还应该计划动画周期；每个事件应该重复多少次。

将动画添加到基本 HTML 页面

我们将对（长）页面上的各种元素应用一系列动画。我们将编写一些 jQuery 来计算元素何时进入视口，然后我们将使用该代码将类添加animated到相关元素或元素中。这将触发 animate.css 库，执行我们想要的任何动画。

您可以从 repo 下载源文件，更改您希望的任何值，并在您自己的基本 HTML 模板中使用。或者，您可能更喜欢分叉笔。无论您喜欢什么，下面都是对正在发生的事情的解释。

发生了什么？

让我们先看看实际的演示，这样你就知道你在做什么：

因此，首先我们需要四个 jQuery 函数，我们将它们放在 controller.js 文件中，或者如果您使用 CodePen，则放在 JS 窗格中。让我们仔细看看每一个。

isInViewport(h);

此函数检测元素是否在窗口的视口中。它接受一个参数 (0-1)，告诉函数应该在视口中的元素的最小部分。默认情况下，这是元素的 40% (0.4)。这是整个事情的样子：

jQuery.fn.isInViewport = function(h) {
    var elH      = jQuery(this).outerHeight(),
        scrolled = jQuery(window).scrollTop(),
        viewed   = scrolled + jQuery(window).height(),
        elTop    = jQuery(this).offset().top,
        elBottom = elTop + elH,
        h        = (typeof(h) != 'undefined' && h.length) ? h : 0.4;

    return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled;
};

随机延迟

下一个功能是为给定的一组元素设置随机动画延迟。它用于分组动画并接受三个参数：

1. children: 元素集的选择器

2. maxDelay: 最大动画延迟

3. minDelay: 最小动画延迟

这是它的样子：

jQuery.fn.randomDelay = function(children,maxDelay,minDelay) {
    jQuery(this).find(children).each(function(){

	    var item = jQuery(this);
	    var randomDelay = Math.round(( Math.random() * ( maxDelay - minDelay ) + minDelay ));

	    item.css('animation-delay',randomDelay+'ms');

	});
}

顺序延迟

此函数与前一个函数非常相似，不同之处在于它用于为给定的一组元素添加顺序延迟。

它需要两个参数：

1. children: 元素集的选择器

2. delayGap：集合中元素之间延迟的最小常数值。

这里是：

jQuery.fn.sequentialDelay = function(children,delayGap) {
    jQuery(this).find(children).each(function(index){

	    var item = jQuery(this);
	    var sequentialDelay = delayGap*index;

	    item.css('animation-delay',sequentialDelay+'ms');

	});
}

动画IfInViewport

最后一个功能非常丰富。它将animated类添加到目标元素或元素组并发送动画数据。

jQuery.fn.animateIfInViewport = function(children) {

    var element = jQuery(this);

	if (children) {
		element.find(children).each(function(){
	        var child = jQuery(this);
	        if(child.isInViewport()){
	            child
	            .addClass(child.data('animation'))
	            .addClass('animated');
	        }
	    });
	} else {
		if(element.isInViewport()){
	        element
	        .addClass(element.data('animation'))
	        .addClass('animated');
	    }
	}
}

应用函数

在这个例子中，我使用了两个动画事件：页面加载和页面滚动。向下滚动到四个初始函数之外，您将看到它们在运行，嵌套在“立即调用” (function($){...})(jquery) 块中。例如：

$('.section-title').each(function(){
	$(this).animateIfInViewport();
});

这说：对于每个 ，当它进入视口时.section-title添加类。animated

如果您查看标记（在 index.html 文件中），您会发现我们想要动画化的每个元素都附加了一个 data 属性。对于章节标题，您会看到 data-animation="fadeInRight". 这对应fadeInRight于 animate.css 中设置的动画，当然都是用 CSS 完成的。

因此，当部分标题滚动到视图中时，动画类将应用于它并执行fadeInRight 动画。

这是另一个例子：

$('#row-bounceIn')
.randomDelay('.col',500,200);

这会查找元素 #row-bounceIn，然后当它进入视口时，它会获取子元素（.col在本例中）并添加animated类。它还对动画应用随机延迟，介于200毫秒500之间。 

检查标记，您会看到那些 .col 元素 data-animation="bounceIn"附加了一个。因此，它们（看看你是否能猜到）根据 animation.css 中的规则反弹。

提示：修改 Animate.css 以满足您的需要

您可以在 animate.css 框架中修改动画规则，我强烈建议您这样做。将 animate.css 视为您需要完善的起点。比如我总是喜欢在 CSS 动画规则中改变计时功能，减少平移量。

这里的一切都在一起。向下滚动并查看所有进入视口时的动画。

结论

当您将所有这些东西放在一起时，您可以构建带有引人注目的动画的令人惊叹的 HTML 模板。

您可以在您的项目中自由使用这些演示中的任何文件和代码片段，无需任何限制。您还可以自由修改给定示例文件中的任何内容。欢迎您在下面的评论部分提出建议和建议。谢谢阅读！