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

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-02-02 11:22:50 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

html5动画模板

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

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

动画分类

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

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

注意：这不是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

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

children ：元素集的选择器
maxDelay ：最大动画延迟
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');

	});
}

顺序延迟

此功能与上一个功能非常相似，不同之处在于，它用于向一组给定的元素添加顺序延迟。

它带有两个参数：

children ：元素集的选择器
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