PC网站动画效果

news/2024/12/22 9:15:28/

这篇文章给大家介绍一个PC网站的动画库 

效果预览网站动画参考网站

https://www.zrsc.vip/#/
 

观看效果之后,开始对使用

WOW.js 实现了在网页滚动时的动画效果,可以让你的页面更有趣,比如页面在向下滚动的时候,让一些元素产生动画效果,吸引用户的注意。

注意点:WOW.js 实现需要 Animate.css 项目的支持

资源下载github资源下载

1.打开git链接下载WOW.js
2.解压文件,找到dist下的wow.min.js文件用于链接到页面中使用WOW.js
3.首先要在页面中链入Animate.css

<!-- 引入animate文件 -->
<link rel="stylesheet" href="css/animate.min.css">

4.在页面底部引入wow.min.js文件并进行初始化

<script src="../js/wow.min.js"></script>
<script>new WOW().init();
</script>

也可以进行自定义配置,如下所示:

var wow = new WOW({boxClass: ‘wow‘,animateClass: ‘animated‘,offset: 0,mobile: true,live: true
});
wow.init();

5.为想要添加动画效果的元素(必须是块级元素或者是行内块级元素)先添加一个名为’wow’的类名,再为其添加相应动画的动画名即可(这个可以到官网中查看自己想要的动画效果类名))。

<div class="wow lightSpeedIn"></div>

具体各种效果大家可参考  https://wowjs.uk/

复制想要的效果的class类名即可。


http://www.ppmy.cn/news/90679.html

相关文章

有关深度学习打标签DIY的五种方式

有关深度学习打标签DIY的五种方式&#xff1a;Labelme、LabelImg、EISeg、Make Sence和CVat等 五种制作Label的方式&#xff1a;1.CVAT&#xff08;Open Data Annotation Platform&#xff09;2.EISeg&#xff08;Efficient Interactive Segmentation&#xff09;自动标注3.Mak…

「一本通 1.2 练习 3」灯泡

题目描述 相比 w i l d l e o p a r d wildleopard wildleopard 的家&#xff0c;他的弟弟 m i l d l e o p a r d mildleopard mildleopard 比较穷。他的房子是狭窄的而且在他的房间里面仅有一个灯泡。每天晚上&#xff0c;他徘徊在自己狭小的房子里&#xff0c;思考如何赚…

oracle数据库大量产生trace文件导致空间不足问题原因的分析

运维人员发现备份出现问题&#xff0c;通过查看数据库日志及主机运行信息&#xff0c;发现遇到大量ORA-00060死锁报错&#xff0c;产生大量TRACE文件&#xff0c;导致ORACLE软件目录空间资源耗尽&#xff1b;为了尽快恢复系统&#xff0c;通过扩大ORACLE软件目录后恢复正常。工…

佛系程序员的月薪五万指南

作为一名IT从业者&#xff0c;我们都有一个共同的目标——赚取更高的薪水。而作为佛系程序员&#xff0c;我们更注重的是工作的心态和自我提升。 佛系程序员不会被快节奏的工作状态和压力所影响。他们抱着一种随缘的心态&#xff0c;坦然面对职场中的挑战。这种心态可以帮助我…

5.23黄金是否会继续下跌?多单被套怎么办?

近期有哪些消息面影响黄金走势&#xff1f;今日黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周二&#xff08;5月23日&#xff09;亚市盘中&#xff0c;现货黄金小幅走弱&#xff0c;一度刷新两日低点至1960美元/盎司&#xff0c;美国明尼亚波利斯联储主席卡…

Gap业绩逆转,宝尊电商是如何当好“全球品牌数字商业伙伴”的?

电商永不眠。技术、消费趋势、供应链&#xff0c;任何一个因素都可以引起商业格局的巨变。一些看似普通的事件落到一个品牌身上&#xff0c;往往会带来改变命运的巨大变化。就像今年2月&#xff0c;宝尊官宣已完成对Gap大中华区的收购&#xff0c;到现在&#xff0c;Gap便已在宝…

Spring Security--守护你的功能权限

首先&#xff0c;让我们明确一下什么是Spring Security以及前后端分离路径拦截器。Spring Security是一个基于Spring框架的安全框架&#xff0c;它提供了一系列的安全服务&#xff0c;包括但不限于认证、授权、加密和会话管理等。而前后端分离路径拦截器是指在前后端分离的情况…

《Spring Guides系列学习》guide16 - guide20

要想全面快速学习Spring的内容&#xff0c;最好的方法肯定是先去Spring官网去查阅文档&#xff0c;在Spring官网中找到了适合新手了解的官网Guides&#xff0c;一共68篇&#xff0c;打算全部过一遍&#xff0c;能尽量全面的了解Spring框架的每个特性和功能。 接着上篇看过的gu…