近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个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. luogu1207双重回文数[usaco1.2]Dual Palindromes

    题目描述 如果一个数从左往右读和从右往左读都是一样,那么这个数就叫做“回文数”.例如,12321就是一个回文数,而77778就不是.当然,回文数的首和尾都应是非零的,因此0220就不是回文数. 事实上 ...

  2. 12个JQuery小贴士

    返回顶部 使用JQuery的 animate 和 scrollTop 方法可以创建简单地返回顶部的动画: // Back to top $('a.top').click(function (e) { ...

  3. http协议(六)报文首部

    http请求和响应报文内容比较多,会分为大概四部分更新,最近比较忙,没太多时间整理- - 首先来看看报文结构吧 1.http请求报文 http请求报文由方法.URI.http版本.http首部字段等构 ...

  4. Entityframework core 动态添加模型实体

    重新DBContext中OnModelCreating protected override void OnModelCreating(ModelBuilder modelBuilder)  { // ...

  5. 01Spring_基本jia包的导入andSpring的整体架构and怎么加入日志功能

    1.什么是Spring : v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:u ...

  6. BZOJ 1026 【SCOI2009】 windy数

    Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B,总共有多少个windy数? I ...

  7. js从0开始构思表情插件

    前言: 由于公司开发项目需要用到表情插件,在网上百度了好久,很多表情插件,都是需要引用好多js文件,也没有现成的demo可以使用,还有一些插件是引用好多图片,每一个表情都要重新请求一下.为了这样一个功 ...

  8. retrofit2中ssl的Trust anchor for certification path not found问题

    在retrofit2中使用ssl,刚刚接触,很可能会出现如下错误. java.security.cert.CertPathValidatorException: Trust anchor for ce ...

  9. mysql full text全文索引必要条件

    show variables like 'ft_m%' 'ft_max_word_len', '84''ft_min_word_len', '4' 对于英文来说, ft_min_word_len=4是 ...

  10. 如何给我们的eclipse新建文件自动生成注释

    有时候,我们需要给我们的文件加载注释,但手动给每一个方法,每一个类添加注释,非常的繁琐,幸好强大的eclipse已经为我们准备好了自动添加注释的配置文件,它就是——codetemplates.xml ...