wow使用教程

最新推荐文章于 2025-03-15 13:04:21 发布
最新推荐文章于 2025-03-15 13:04:21 发布
阅读量2w 收藏 18
点赞数 1
分类专栏： web前端 文章标签： wow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_19558705/article/details/50364238
版权

wow使用教程简单易懂。

技术：bootstrap，font-awesome，wow，animate.css；

特点：让页面打开更优雅

宗旨：从实战中学知识。

效果图：


学习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>wow案例</title>
		<link rel="stylesheet" href="css/animate.min.css" />
		<style type="text/css">
			div {
				width: 300px;
				height: 200px;
				border: 1px solid #eee;
			}
		</style>
	</head>
	<body>
		<!--
			animate.css 学习手册：http://daneden.github.io/animate.css/
			学习资料：
			data-wow-duration:改变动画时间
			data-wow-delay:延迟在动画开始之前
			data-wow-offset:距离开始动画(浏览器底部)
			data-wow-iteration:动画重复的次数
		-->
		<div class="wow pulse">
			wow pulse
		</div>

		<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">
			wow slideInLeft
		</div>

		<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="2">
			wow slideInRight
		</div>
		<script type="text/javascript" src="js/wow.min.js"></script>
		<script type="text/javascript">
			//			new WOW().init()
			wow = new WOW({
				boxClass: 'wow', // default 盒子类名
				animateClass: 'animated', // default 为animate.css触发css动画的库
				offset: 0, // default 偏移量
				mobile: true, // default 是否支持手机
				live: true // default 检查新元素
			})
			wow.init();
		</script>
	</body>
</html>

实战代码： 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>wow案例</title>
		<link rel="stylesheet" href="css/animate.min.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="static/font-awesome/4.3.0/css/font-awesome.min.css" />
		<style type="text/css">
			.icon-circle {
				width: 80px;
				height: 80px;
				border: 6px solid #54CC8F;
				border-radius: 80px;
			}
			/*实战css start*/
			.section-header .section-title {
				font-size: 44px;
				color: #272727;
				text-transform: uppercase;
				position: relative;
				padding-bottom: 20px;
				margin: 0 0 20px;
			}
			.section-header .section-title:before {
				content: "";
				position: absolute;
				width: 240px;
				bottom: 0;
				left: 50%;
				margin-left: -120px;
				height: 1px;
				background: #ebebeb;
			}
			.section-header .section-title:after {
				content: "";
				position: absolute;
				width: 24px;
				height: 24px;
				bottom: -11px;
				left: 50%;
				margin-left: -12px;
				border: 5px solid #fff;
				border-radius: 20px;
				background: #45aed6;
			}
			.media.service-box .pull-left > i {
				font-size: 24px;
				height: 64px;
				line-height: 64px;
				text-align: center;
				width: 64px;
				border-radius: 100%;
				color: #45aed6;
				-webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
				position: relative;
			}
			.media.service-box .pull-left > i:after {
				content: "";
				position: absolute;
				width: 20px;
				height: 20px;
				margin-top: 7px;
				right: -5px;
				border: 4px solid #fff;
				border-radius: 20px;
				background: #45aed6;
			}
			/*实战css end*/
		</style>
	</head>

	<body>
		<div class="container">
			<h2 class="text-center wow fadeInDown">ITDragon博客</h2>
			<p  class="text-center wow fadeInDown"><a href="http://blog.youkuaiyun.com/qq_19558705">欢迎访问我的博客：http://blog.youkuaiyun.com/qq_19558705</a></p>

			<div class="row text-center">
				<div class="col-md-2 col-md-4 col-xs-6">
					<div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="0ms">
						<div class="icon-circle">
							<span>1</span>
							<h4><a href="http://blog.youkuaiyun.com/qq_19558705/article/details/49851879">干</a></h4>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-md-4 col-xs-6">
					<div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="100ms">
						<div class="icon-circle">
							<span>2</span>
							<h4><a href="http://blog.youkuaiyun.com/qq_19558705/article/details/49947317">货</a></h4>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-md-4 col-xs-6">
					<div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="200ms">
						<div class="icon-circle">
							<span>3</span>
							<h4><a href="http://blog.youkuaiyun.com/qq_19558705/article/details/50108037">等</a></h4>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-md-4 col-xs-6">
					<div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="300ms">
						<div class="icon-circle">
							<span>4</span>
							<h4><a href="http://blog.youkuaiyun.com/qq_19558705/article/details/50108171">你</a></h4>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-md-4 col-xs-6">
					<div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="400ms">
						<div class="icon-circle">
							<span>5</span>
							<h4><a href="http://blog.youkuaiyun.com/qq_19558705/article/details/50127611">来</a></h4>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-md-4 col-xs-6">
					<div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="500ms">
						<div class="icon-circle">
							<span>6</span>
							<h4><a href="http://blog.youkuaiyun.com/qq_19558705/article/details/50318981">拿</a></h4>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 实战 start -->
		<div class="container">
			<div class="section-header">
				<h2 class="section-title text-center wow fadeInDown">WOW</h2>
				<p class="text-center wow fadeInDown">实战效果</p>
			</div>
			<div class="row">
				<div class="col-sm-3 col-md-3 media service-box wow fadeInUp" data-wow-duration="400ms" data-wow-delay="0ms">
					<div class="pull-left">
						<i class="fa fa-user-md"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">I</h4>
						<p>详细内容</p>
					</div>
				</div>
				<div class="col-sm-3 col-md-3 media service-box wow fadeInUp" data-wow-duration="400ms" data-wow-delay="100ms">
					<div class="pull-left">
						<i class="fa fa-heart"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">LOVE</h4>
						<p>详细内容</p>
					</div>
				</div>
				<div class="col-sm-3 col-md-3 media service-box wow fadeInUp" data-wow-duration="400ms" data-wow-delay="200ms">
					<div class="pull-left">
						<i class="fa fa-users"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">YOURS</h4>
						<p>详细内容</p>
					</div>
				</div>
				<div class="col-sm-3 col-md-3 media service-box wow fadeInUp" data-wow-duration="400ms" data-wow-delay="200ms">
					<div class="pull-left">
						<i class="fa fa-life-ring fa-spin"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">^0^</h4>
						<p>详细内容</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 实战 end -->
		<script type="text/javascript" src="js/wow.min.js"></script>
		<script type="text/javascript">
			new WOW().init();
		</script>
	</body>

</html>


资源下载： http://download.youkuaiyun.com/detail/qq_19558705/9369099


知识点：

①after和before选择器

在之前，之后执行css代码，其属性必须要有content


②animate.css使用

这是一款很强大的动画库，不需要js就可以达到效果，文档很详细很直观：http://daneden.github.io/animate.css/


③wow使用

class中必须要要包含wow

data-wow-duration:改变动画时间
data-wow-delay:延迟在动画开始之前
data-wow-offset:距离开始动画(浏览器底部)
data-wow-iteration:动画重复的次数


④font-awesome

http://fontawesome.dashgame.com/ 这是4.4.0的


我觉得在实战中学习比盲目学习效果好很多，知道这些知识可以做什么，解决了为什么学这些知识的问题。

我总结，你来学，一起装逼一起飞。有什么疑问和建议可以留言，我会及时修改。转载请注明来源http://blog.youkuaiyun.com/qq_19558705。

更多干货等你来拿 http://www.itit123.cn/



页面滚动时显示动画 WOW.js+animate.css
小毛每天要顺毛的博客
01-20 617
wow官网：https://www.delac.io/wow/ animate官网：https://animate.style/ 一、引用 建议头部引用 <head> <link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css"> <script src="http://mynameismatthieu.com/WOW/dist/wow.min...
wow.js使用方法 css页面滚动动画
MELANCHOLY ❤ ◁ ❚❚ ▷
11-24 490
css 页面滚动动画 wow.js 页面根据滚动条变化展现动画 官网链接https://www.delac.io/wow/ 使用时需要引入wow.js或wow.min.js 以及animate.css或者animate.min.css 文件下载链接https://github.com/matthieua/WOW 使用方法 引入，初始化 <link rel="stylesheet" type="text/css" href="css/animate.min.css">
使用 Animate.css、AOS 和 WOW.js 实现炫酷动画效果
最新发布
qq_60743005的博客
03-15 536
Animate.css 是一个强大的 CSS 动画库，提供了丰富的预定义动画效果，适用于各种场景。通过 npm 安装： 在项目中引入： ​1.2 使用方法 在 HTML 元素中添加 和动画类名即可： ​1.3 自定义动画属性 通过 CSS 修改动画的持续时间、延迟和循环次数： ​1.4 常用动画效果 ​淡入淡出效果：, , , , ​滑动进入效果：, , , ​弹跳进入效果：, , , , ​旋转进入效果：, , , , ​放大进入效果：, , , , ​特殊
wowjs动画效果
bestyinjun的专栏
08-23 1031
wowjs动画效果
animate,wow,Bootstrap,scrollReveal
低调哥的博客
09-16 3126
Animate 1.简介 随着HTML5规范的不断完善，围绕着这一生态有很多实用的框架，极大的提高了我们的开发效率，常见的框架代表有：UI层面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS层面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，还有很多常用的动画库、字体图标，比如：Animate、Wow、Iconfont、Ico
分享一个实用插件（页面滚动触发动画）以及其内部的所有动画属性值
u011927449的博客
05-11 632
个人不太擅长实用JQuery插件，比较喜欢使用原生JS代码，但是制作网站时的难度很大。 今天推荐一个比较实用的插件 地址为： http://www.htmleaf.com/jQuery/Layout-Interface/201704274479.html <link rel="stylesheet" href="css/animate.min.css"> <script type="text/javascript" src="js/jquery-1.11.0...
在vue中使用wow动画插件（下载，配置，使用，参数）
babyxuqian的博客
02-18 3469
1.首先下载wow插件 下载命令：npm install wowjs --save-dev 2.在项目中的main.js中进行配置 import 'wowjs/css/libs/animate.css' import wow from 'wowjs' Vue.prototype.$wow = wow 3.使用方法 1.在需要使用的页面中的mounted函数加入代码 mounted() { this.getList(); this.$nextTick(() => {
【WOW.js】Animate.css的黄金搭档
weixin_39415598的博客
02-04 290
微信订阅号：Rabbit_svip 本节目录 WOW.js简介 WOW.js基础用法 【简介】 WOW.js的出现，让Animate.css有更多可玩性。 Animate.css的用法可以看：【Animate.css】CSS动画库 WOW.js 是轻量级类库，只依赖Animate.css。不依赖其他js库。 WOW.js的主要功能是实现...
全面深入：WOW使用教程详尽解析
考虑到压缩文件名称列表中仅有“wow教程”这一个条目，未能提供更丰富的信息来确定教程具体包含了哪些内容，上述知识点是基于对“wow”和一般游戏教程的通用理解提出的。如果实际的教程内容有特定的侧重点，例如面向...
WOW插件制作指南PDF+WOW魔兽世界的APIs教程
08-02
本压缩包包含两部分资源：《WOW插件制作指南PDF》和《WOW魔兽世界的APIs教程》，将帮助你深入了解如何开发自己的魔兽世界插件。 《WOW插件制作指南PDF》可能涵盖了以下内容： 1. **插件基础**：介绍什么是插件，...
JS库之wow.js使用方法
10-19
哇哦（Wow.js）是一个JavaScript库，专门设计用于创建滚动视差动画效果。...希望这篇关于Wow.js的使用教程对你有所帮助，如果你在使用过程中遇到任何问题，欢迎随时提问，我们很乐意为你解答。感谢你对我们网站的支持！
WOW.js动画使用教程：打造动态有趣页面
在探讨“wow动画，使用方法”时，我们将重点放在三个主要方面：WOW.js动画库的介绍、如何结合animate.css使用WOW.js以及在网页中实现动画效果的具体步骤。WOW.js是一个非常流行的JavaScript库，它能够让你的网页元素...
WOW.js 使用教程
梦之滇丶誓言
07-26 444
wow.js依赖于animate.css，首先需要在 head内引入animate.css或者animate.min.css。 <link rel="stylesheet" href="css/animate.css"> 引入wow.js或者wow.min.js，然后js文件里再写一行代码。 <script src="js/wow.min.js"></sc...
织梦dedecms如何实现点击作者，查看该作者发布到所有文章
ymuno的博客
10-06 659
看到一篇喜欢到文章，想看该作者到其他文章，该如何实现？原理很简单，可以通过下面两种方法来实现，点击左侧菜单，模板—>模板管理—>默认模板管理—>article_article.htm，点击修改1，利用搜索功能，将该作者所发布到文章罗列出来 找到<i class="fa fa-user"></i>{dede:field.writer/}这段代码，将其改为下...
一款css3的标签动画效果
dengdi2376的博客
09-27 150
/*响应式设计，动画效果需引入animate.min.css库*/<div class="index_tag"> <div class="rowFluid"> <div class="span12"> <div class="container"> ...
2024.2.3日总结（wow.js）
明里灰的博客
02-04 843
网页加上动效的作用：吸引用户注意力，增强用户体验，强调重要信息，提升页面流畅度有的页面在向下滚动的时候，有些元素会产生细小的动画效果。比如需要做到滚动条滑到某个位置时，才能显示动画。
WOW.js – 让页面滚动更有趣
青年码农
05-27 740
关注“青年码农”，回复“特效“获取各种资料粒子特效、可视化等源码如果给向下滚动的页面增加一些细微的动画，这往往能给浏览者带来更好的体验，WOW.js就是这么一个能让用户眼前一亮的JavaScript库。WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。由于使用了CSS3动画，所以一些老旧的浏览器是不支持的。为了兼容，可以增加浏览器判断。使用方法1.引入文件-animate和WOW<linkrel="stylesheet"..
在html使用wow，让你的网页有点动画效果
weixin_52921391的博客
08-27 563
当滚动条滑到相应位置，有些网页可以出现像从左或者从右移动到对应位置，或者一些盒子从底下浮出，这里就来说怎么实现的 其实不难，就是用到了wow.js 首先
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值