wow.js使用方法
近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结:
使用方法真是超简单~~
需要配合Animated.css使用
方法如下:
1.引用wow.js或者wow.min.js 和 animate.css
2.在需要用到这个效果的元素上面添加class="wow fadeInUp" 和 data-wow-delay=".1s",具体所表示的含义在下图中有说明
3.初始化wow.js
代码如下:
<script>
wow = new WOW({
animateClass: 'animated',
});
wow.init();
</script>
大写的OK!!!
就是这么简单与任性~~
wow.js使用方法的更多相关文章
- WOW.js 的使用方法
WOW.js 是一个非常轻量级的动画效果插件,使用它可以组合多种炫酷的效果. 使用WOW.js可以实现我们在网站上常看到的,页面滚动到指定区域时就显示动画的效果. 1.要使用WOW.js必须引入:WO ...
- wow.js特效使用方法
wow.js 的官网特效地址; https://www.delac.io/wow/ 使用方式: new WOW().init(); 需要加的CSS: .ani{visibility: hidden;}
- 如何解决wow.js与fullpage的兼容性
项目需要做到全屏显示的同时还需要做到实时执行动画.但是发现在使用fullpage之后,wow.js(不知道这个是啥的点击这里)不起作用. 找了诸多资料,解决方法如下: $('#fullpage').f ...
- wow.js中各种特效对应的类名
一.(页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也 ...
- WOW.js – 让页面滚动更有趣
演示1 演示2-仿oppo首页 下载 简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的 ...
- wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
- WOW.js 使用教程
官网加动画特效,哇哦,下面我介绍一下WOW.js 官网地址:https://www.delac.io/wow/ 点击github可以找到wow.js和wow.min.js 以及animate.css者 ...
- WOW.js – 让页面滚动更有趣
官网:http://mynameismatthieu.com/WOW/ 建议去官网一看 下载地址:https://github.com/matthieua/WOW 浏览器兼容 IE10+ Chrom ...
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
随机推荐
- JMeter学习(一)工具简单介绍
一.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件, ...
- linux(TINY6410)下移植boa服务器
今天在tiny6410上移植了boa服务器,中间遇到了一些小问题.当时也及时解决了. 第一步:boa的编译 在www.boa.org下载Boa的压缩包 我这里用的是 boa-0.94.13.tar. ...
- jquery两个滚动条样式
jquery两个滚动条样式 点击下载
- C#输出log信息
在写程序的过程中,有时候我们需要添加一些log信息,这个时候,可以采用下面的方法来实现. public static void WriteLog(string ExtraMsg, Exception ...
- Flex ActionScript版本的Map类型
ActionScript中没有Map类型,因为Object就相当于Map了.Object的属性相当于key,值相当于value. 也就是说,没有必要有Map类型.但是,这样做,也会带来一些问题,造成不 ...
- handlebars+require
handlebars+require 最近在某网站看到了handlebars.js,出于好奇就百度了下这是神马玩意,结果让我很是欢喜,于是就开始自学下,handlebars就几个方法,蛮简单,言归正传 ...
- Android 编译命令 make j8 2>&1 | tee build.log 解释
在编译Android的时候,经常看到这样的命令 make -j8 2>&1 | tee build.log 其中 make 是编译命令, -j8 这里的 8 指的是线程数量,就是你要 ...
- 前后端分离工具之ftl-server
文章来源:https://www.npmjs.com/package/ftl-server 源代码可参考:https://github.com/szmtcjm/ftl-server/blob/mast ...
- 制作stick侧边栏导航效果
其实这种效果网上好多的插件,但是我想自己实现看看,其实把思路理清实现起来就非常简单了,让我们看看: 分析: 从图中我们可以看出:右边的top=100px,那么它应该在第一个框的top+height=1 ...
- DOM之表格与表单基础分享
我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...