wow使用教程

最新推荐文章于 2022-06-06 09:26:14 发布
最新推荐文章于 2022-06-06 09:26:14 发布
阅读量1.9w 收藏 17
点赞数 1
分类专栏： web前端 文章标签： wow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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.csdn.net/qq_19558705">欢迎访问我的博客：http://blog.csdn.net/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.csdn.net/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.csdn.net/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.csdn.net/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.csdn.net/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.csdn.net/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.csdn.net/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.csdn.net/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.csdn.net/qq_19558705。

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



ITDragon龙
关注
  • 1
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
wow.js使用方法 css页面滚动动画
MELANCHOLY ❤ ◁ ❚❚ ▷
11-24 359
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">
在vue中使用wow动画插件（下载，配置，使用，参数）
babyxuqian的博客
02-18 3293
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(() => {
一款css3的标签动画效果
dengdi2376的博客
09-27 123
/*响应式设计，动画效果需引入animate.min.css库*/<div class="index_tag"> <div class="rowFluid"> <div class="span12"> <div class="container"> ...
HTML+CSS+JS 实现一个漂亮的登陆页面
程序员柒的博客
06-06 1478
HTML+CSS+JS 实现一个漂亮的登陆页面
jq04--自定义动画animate()、hide()/show()/toggle()、slideUp()/slideDown()/slideToggle()、fadeIn()/fadeOut()
muzidigbig的博客
07-10 684
jq的动画实质是通过dom+自定义animate()（进行封装的最大的区别就是给它起了一个语义化的名称；api中的动画是把常用的封装好了我们直接调用即可，api中的动画基本上都是脱标）1.animate(params,[speed],[easing],[fn]);自定义动画参数详解：params:一组包含作为动画属性和终值的样式属性和及其值的集合（必选，json的形式）speed:...
Wireshark使用教程.pdf
01-28
Wireshark 使用教程.pdf Wireshark 是一个功能强大的网络包分析工具，能够捕捉网络包并显示包的详细协议信息。它支持 UNIX 和 Windows 平台，并可以打开和保存捕捉的包，导入导出其他捕捉程序支持的包数据格式，并...
JS库之wow.js使用方法
10-19
哇哦（Wow.js）是一个JavaScript库，专门设计用于创建滚动视差动画效果。...希望这篇关于Wow.js的使用教程对你有所帮助，如果你在使用过程中遇到任何问题，欢迎随时提问，我们很乐意为你解答。感谢你对我们网站的支持！
Arctium WoW Client Launcher
08-19
Arctium WoW Client Launcher 27377版本。 HOWTO:​ 安装方法： 1.Use 7zip/WinRAR to extract the archive into your wow folder. 1.用解压软件将压缩包内容解压到WOW文件夹内，即将Arctium WoW Client Launcher....
魔兽世界插件编写教程与资料
12-02
有一本《Programming in Lua》，lua版本是5.1，用于插件的功能...2份wow插件的简单实例教程 外带wow的API手册供查询 wow插件编写资料实在太少，CWDG可能是目前中文资料最多的地方，英文的推荐wowwiki或者wowprogram
魔兽全图地址源码易语言版
04-25
魔兽全图地址源码易语言版，1.20-1.24的基本都在这了
【自己的整理】页面滚动时触发动画特效 wow.js + Animate.css
角角兔的博客
04-18 3210
在页面添加初始动画特效 在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果，虽然动画效果就像ppt里面的动画效果一样。。。 环境设置 添加动画效果，首先要设置环境，第一步就是先要引入相应的js 和css 需要引入的js：wow.js 本案例中建议在头部引入这个js不然可能会出现页面先加载然后动画再出现的情况，这样显...
wow.js 使用方法
轻风细雨_林木木
08-16 4562
使用方法： 1、wow.js依赖于animate.css，首先需要在 head内引入animate.css或者animate.min.css。 &amp;amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;css/animate.css&amp;quot;&amp;amp;gt; 2、引入wow.js或者wow.min.js，然后js文件里再写一行代码。 &amp;amp
layui垂直导航右边文字变化
九亿宅男的梦的博客
05-06 1576
1.当前点击跳转（js控制） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href="layui/css/layui.css"&g...
animate inater插件_bootstrap 动态效果WOW animate插件
weixin_39635314的博客
12-19 280
随着HTML5规范的不断完善，围绕着这一生态有很多实用的框架，极大的提高了我们的开发效率，常见的框架代表有：UI层面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS层面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，还有很多常用的动画库、字体图标，比如：Animate、Wow、Iconfont、Iconmoon等。这些前端框架典型的特点：简单...
页面加载时模块移入动画---wow
weixin_38797742的博客
12-10 622
1，在头部引用animate.css <link rel="stylesheet" href="animate.css"> 2，body底部引入wow.js 且初始化一下 <script src="js/wow.min.js"></script> <script> new WOW().init(); </script> 配置 属性/方法 类型 默认值 说明 boxClass 字符串 ‘wow’ 需要执行动画的元素的 class animate
关于wow.js在vue项目中的使用及遇到的坑
just_wq的博客
06-29 5010
第一次使用wow.js实现页面滚动加载动画。使用过程中主要遇到了两个问题：1.动画效果无效（后来发现是引用的动画类名问题）2.设置动画延迟执行遇到会先显示再延迟执行进入效果的问题。也是由于错误使用了动画类名。所以记录一下~ 在vue项目中的使用 1. 安装 npm install wowjs --save (animate.css会被自动安装，但是这里有坑) 2. 在main.js中引入animate.css 引入时需要注意看是引入的哪个animate.css文件，在后面有详细讲解。 3...
WOW.js 使用教程
HVENLY的博客
05-21 6991
目录一、WOW.js介绍二、使用步骤三、案例制作 一、WOW.js介绍 WOW.js 实现了在网页滚动时的动画效果，可以让你的页面更有趣，比如页面在向下滚动的时候，让一些元素产生动画效果，吸引用户的注意。 注意点：WOW.js 实现需要 Animate.css 项目的支持。 点击前往WOW.js官网 二、使用步骤 1.打开git链接下载WOW.js 2.解压文件，找到dist下的wow.min.js文件用于链接到页面中使用WOW.js 3.首先要在页面中链入Animate.css <!-- 引入ani
WOW使用以及一些坑
qq_44993242的博客
08-28 708
1-下载依赖 cnpm install wowjs --save 在这里，我建议大家以后下载依赖，都把save写全，因为不写全，在pageage里，是不会记录进去，导致别人下载你的项目，或者git上都是没有这个依赖包的，别人npm时就会报错，就需要单独下载2 2-单独组件引入动画 import {WOW} from 'wowjs'; mounted() { // 在项目加载完成之后初始化wow this.$nextTick(() => { let wow = new W
Vue3使用wow.js动画库
最新发布
05-20
要在Vue3中使用wow.js动画库，您可以按照以下步骤： 1. 安装wow.js和animate.css库： ``` npm install wow.js animate.css --save ``` 2. 在您的Vue组件中引入wow.js和animate.css： ```javascript import WOW from 'wow.js' import 'animate.css' ``` 3. 在组件的mounted()生命周期函数中初始化wow.js： ```javascript mounted() { new WOW().init() } ``` 4. 在您的HTML元素上添加wow和animate.css类名： ```html <div class="wow animate__animated animate__bounceInLeft">Hello World!</div> ``` 5. 最后，在您的CSS文件中定义使用的动画效果： ```css .wow { visibility: hidden; } ``` 这样就可以在Vue3中使用wow.js动画库了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值