html5动画模板_使基本HTML模板更上一层楼的动画

html5动画模板

动画可以使您的网站演示文稿更上一层楼。 正确的动画将对您网站的用户体验产生积极的影响，加强每次互动并创造令人难忘的体验。 另一方面，选择不当的动画可能会破坏体验，迷惑用户并可能会降低性能。

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

动画分类

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

1. 类型 ：单身，团体，相关
2. 顺序 ：顺序，随机，同时
3. 事件 ：加载，滚动，单击，悬停，调整大小等。
4. 尺寸 ：小，中，大
5. 重复 ：不重复，重复

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

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

1.类型

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

有时候，您需要为分组元素（兄弟姐妹）制作动画，例如：图标，图库中的图像，单行中的列等。

或者您可能需要为相关元素设置动画； 彼此之间没有直接兄弟姐妹关系的人。

2.顺序

动画序列可以通过动画延迟来控制。 延迟可能会使事情发生时间，使动画顺序发生。 您可能希望事情随机发生，或者您希望两个或多个元素同时进行动画处理。

3.活动

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

4.尺寸

大小是一个相对术语。 动画的“大小”可以解释为与其持续时间，其物理尺寸或其运动值有关。 为小元素设置动画的速度可能与为大元素设置动画的速度不同。 这完全取决于解释，但是“大小”对于最终结果而言很重要。

5.重复

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

将动画添加到基本HTML页面

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

您可以从仓库下载源文件 ，更改所需的任何值，然后在自己的基本HTML模板中使用。 或者，您可能更喜欢叉子笔 。 不管您的喜好如何，以下都是对发生情况的解释。

这是怎么回事？

让我们先看一下实际的演示，这样您就知道要做什么：

因此，首先，我们需要四个jQuery函数，这些函数将放入controller.js文件或JS窗格（如果您使用的是CodePen）中。 让我们仔细看看每个。

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;
};

randomDelay

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

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');

	});
}

animateIfInViewport

最后一个功能非常丰富。 它将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" 。 这对应于在animate.css中设置的fadeInRight动画，当然，所有动画都使用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模板。

翻译自: https://webdesign.tutsplus.com/articles/animations-to-take-your-basic-html-template-to-the-next-level--cms-32731

html5动画模板