近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结:

wow.js演示地址

wow.js的github地址

使用方法真是超简单~~

需要配合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使用方法的更多相关文章

  1. WOW.js 的使用方法

    WOW.js 是一个非常轻量级的动画效果插件,使用它可以组合多种炫酷的效果. 使用WOW.js可以实现我们在网站上常看到的,页面滚动到指定区域时就显示动画的效果. 1.要使用WOW.js必须引入:WO ...

  2. wow.js特效使用方法

    wow.js 的官网特效地址; https://www.delac.io/wow/ 使用方式: new WOW().init(); 需要加的CSS: .ani{visibility: hidden;}

  3. 如何解决wow.js与fullpage的兼容性

    项目需要做到全屏显示的同时还需要做到实时执行动画.但是发现在使用fullpage之后,wow.js(不知道这个是啥的点击这里)不起作用. 找了诸多资料,解决方法如下: $('#fullpage').f ...

  4. wow.js中各种特效对应的类名

    一.(页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也 ...

  5. WOW.js – 让页面滚动更有趣

    演示1 演示2-仿oppo首页 下载 简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的 ...

  6. wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  7. WOW.js 使用教程

    官网加动画特效,哇哦,下面我介绍一下WOW.js 官网地址:https://www.delac.io/wow/ 点击github可以找到wow.js和wow.min.js 以及animate.css者 ...

  8. WOW.js – 让页面滚动更有趣

    官网:http://mynameismatthieu.com/WOW/ 建议去官网一看 下载地址:https://github.com/matthieua/WOW 浏览器兼容 IE10+  Chrom ...

  9. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

随机推荐

  1. 嵌入式Linux驱动学习之路(七)Linux内核启动流程

    编译的内核可能会很大,故这里可以压缩一下.而在内核文件中需要解压,所以就会有一段自解压代码. 在uboot启动内核的时候,调用了函数: thekernel(0,MACH_ID,params_addr ...

  2. js获取样式的兼容写法

    var currentStyle = function(element){ return element.currentStyle || document.defaultView.getCompute ...

  3. asp.net webapi支持跨域

    1.Install-Package Microsoft.AspNet.WebApi.Cors 2. using System.Web.Http; namespace WebService {     ...

  4. 02Spring_Ioc和DI介绍

    什么是IOC? IoC: 控制反转, 解决程序对象紧密耦合问题(工厂+反射+ 配置文件), 将程序中原来构造对象的权限,交给IoC容器来构造,当程序需要对象,找IoC容器获取.

  5. vs 2005 thread 无法调试

    两种办法:1.打开项目属性,在“Debug”一项里,把“Enable the Visual Studio hosting process”前的钩去掉.这个方法不是好办法.2.打开计算机管理,在服务里将 ...

  6. junit

    junit测试代码也视为开发内容的一部分,强烈建议在开发过程中编写junit代码作为开发调试工具,用junit调试代码不需要启动应用服务器,实际上会加快开发速度.

  7. web 前端常用组件【04】Datetimepicker 和 Lodop

    web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.c ...

  8. 迭代和递归 - leetcode 206. Reverse Linked List

    Reverse Linked List,一道有趣的题目.给你一个链表,输出反向链表.因为我用的是JavaScript提交,所以链表的每个节点都是一个对象.例如1->2->3,就要得到3-& ...

  9. PHP核心编程知识点

    一.PHP基本语法 PHP标记:一共有四种,只推荐使用第一种 语句结束符:分号 注释:行注释(//  #)和块注释(/*   */),注释的规范 二.常见的输出语句 print echo var_du ...

  10. .net程序员转行做手游开发经历(五)

    大家好,真的是好长时间都没有更新博客了.上来博客园发现很多朋友还在关注我们,那给大家汇报下最近的一些进展. 收费版上线了,但是下载量不是很多,刚发布的时候下载每天的下载还是挺多,我们几个小伙伴在论坛. ...