官网加动画特效，哇哦，下面我介绍一下WOW.js

  • 官网地址：https://www.delac.io/wow/ 点击github可以找到wow.js和wow.min.js 以及animate.css者animate.min.css

  • wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。

  • 在body底部引入wow.js 且初始化一下：

　　<script src="js/wow.min.js"></script>

　　<script>

　　　　new WOW().init();

　　</script>

    • 如果需要自定义配置，可如下使用：

      var wow = new WOW({
      
    boxClass: ‘wow‘,
      
    animateClass: ‘animated‘,
      
    offset: 0,
      
    mobile: true,
      
    live: true
      
});
      
wow.init();

      配置

      属性/方法 类型 默认值 说明
      boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
      animateClass 字符串 ‘animated’ animation.css 动画的 class
      offset 整数 0 距离可视区域多少开始执行动画
      mobile 布尔值 true 是否在移动设备上执行动画
      live 布尔值 true 异步加载的内容是否有效

      　　注意new WOW().init();中的WOW要大写，否则就没效果了。

      1、在css下方js上方写需要动画的元素（必须设置为块状或者行内块状！必须设置为块状或者行内块状！必须设置为块状或者行内块状！），并添加class类名。

      <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

      　　类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。

      <div class="wow bounce "  data-wow-delay="1.5s"  data-wow-iteration："1"></div>

      data-wow-duration：更改动画持续时间
      data-wow-delay：动画开始前的延迟
      data-wow-offset：开始动画的距离（与浏览器底部相关）
      data-wow-iteration：动画的次数重复（无限次：infinite）

      wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值
      wow bounceIn 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
      wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
      wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
      wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
      wow bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
      wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
      wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变
      wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
      wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变
      wow lightSpeedIn 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
      wow pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
      wow flipInX 原位置后仰前栽、透明度从100%变化至设定值
      wow flipInY 原位置左右旋动、透明度从100%变化至设定值
      wow bounce 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
      wow shake 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
      wow swing 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
      wow bounceInU 原位置不变、直接从不显示到显示（无过过渡效果）
      wow wobble 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

      2、其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。

      有的网站采用全屏滚动的fullpage插件与wow相结合的方法，实现的效果比较酷炫。我们完全可以仿写。

      但是使用fullpage.js下wow.js无效失效没动作

      问题出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下
      　　$(‘#fullpage‘).fullpage({
      scrollBar:true；
      　　});
      最后利用css将滚动条隐藏,将html添加overflowhidden，代码如下
      　　html{

      　　　　overflow:hidden;

      　　}

  • 自己写的html代码如下：

  • <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>使用wow做的项目</title>
    
    <link rel="stylesheet" href="css/animate.css">
    
    <style>
    
    .container{
    
        width:800px;
    
        margin:0 auto;
    
    }
    
    .container ul{
    
        display:flex;
    
        display:-webkit-flex;
    
        justify-content: space-between;
    
        flex-wrap: wrap;
    
    }
    
    .container ul li{
    
        width:300px;
    
        height:300px;
    
        margin-bottom:40px;
    
        list-style:none;
    
        border-radius:50%;
    
        text-align:center;
    
        vertical-align:middle;
    
        align-items: center;
    
        line-height:300px;
    
        background-color:pink;
    
    }
    
    .container ul li:nth-child(4n){
    
        background-color:#409EFF;
    
    }
    
    .container ul li:nth-child(4n+1){
    
        background-color:#67C23A;
    
    }
    
    .container ul li:nth-child(4n+2){
    
        background-color:#E6A23C;
    
    }
    
    </style>
    
</head>
    
<body>
    
<section class="container">
    
    <ul>
    
        <li class="wow bounceInLeft">啊啊啊</li>
    
        <li class="wow bounceInRight"></li>
    
        <li class="wow bounceIn"></li>
    
        <li class="wow bounceInUp"></li>
    
        <li class="wow bounceInDown"></li>
    
        <li class="wow slideInUp"></li>
    
        <li class="wow slideInDown"></li>
    
        <li class="wow slideInLeft"></li>
    
        <li class="wow slideInRight"></li>
    
        <li class="wow lightSpeedIn"></li>
    
        <li class="wow pulse"></li>
    
        <li class="wow flipInX">哦哦哦</li>
    
        <li class="wow flipInY"></li>
    
        <li class="wow bounce"></li>
    
        <li class="wow shake"></li>
    
        <li class="wow wobble"></li>
    
        <li class="wow rollIn"></li>
    
        <li class="wow fadeInUpBig" data-wow-delay="0.3s"></li>
    
        <li class="wow fadeInUpBig" data-wow-delay="0.6s">呃呃呃</li>
    
        <li class="wow fadeInUpBig" data-wow-delay="0.9s"></li>
    
        <li class="wow fadeInUpBig" data-wow-delay="1.2s"></li>
    
        <li class="wow fadeInUpBig" data-wow-delay="1.5s"></li>
    
    </ul>
    
</section>
    
<script src="js/wow.min.js"></script>
    
<script>
    
  new WOW().init();
    
</script>
    
</body>
    
</html>

    原文摘自：http://www.mamicode.com/info-detail-2286884.html

WOW.js 使用教程的更多相关文章

  1. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  2. wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

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

  3. css3特效插件wow.js

    在使用css3写特效的时候,会遇到比较麻烦的就是css3代码需要大量的调试,但是现在有了wow.js,让写特效变得简单了很多. wow.js官网 https://www.delac.io/wow/in ...

  4. 网页延迟加载动画的实现-WOW.js

    网页内容一开始不显示,随着鼠标下拉延迟显示,还有时间差 一开始觉得好难好复杂好高大上,直到我发现 wow.js …… 首先是演示地址:https://www.delac.io/wow/ 嗯,狗子确实很 ...

  5. WOW.js——在页面滚动时展现动感的元素动画效果

    插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注 ...

  6. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

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

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

  8. 24个很赞的 Node.js 免费教程和在线指南

    JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...

  9. wow.js使用方法

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

随机推荐

  1. JS教程：从0开始

    一. JS简介 1. JavaScript概述 JavaScript 是世界上最流行的编程语言.这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. ...

  2. SpringBoot之旅第三篇-日志

    一.前言 日志对于一个系统的重要性不言而喻,日志能帮我们快速定位线上问题,市场上存在非常多的日志框架,比较常见的有 JUL,JCL,Log4j,Log4j2,Logback.SLF4j.jboss-l ...

  3. 阿里云ECS安装Cadvisor报错

    阿里云ECS安装Cadvisor报错安装命令: sudo docker run \ --volume=/:/rootfs:ro \ --volume=/var/run:/var/run:ro \ -- ...

  4. WebSocket协议详解与c++&c#实现

    摘要: 随着手机游戏.H5游戏以及微信小游戏的普及,越来越多的客户端-服务器端的通讯采用websocket协议.Websocket协议是全双工的.基于数据帧的.建立在tcp之上的长连接协议.Webso ...

  5. Cenots7下安装运行.NET Core、MicroSoft SQL Server 2019 preview 的基础实践

    一:概要 适应人群:.Net初学者.想了解.Net Core在Linux系统中的运行环境搭建者.初次且想在linux上应用.Net Core开发应用程序者: 基础技能:了解.NET基础开发技能者.有一 ...

  6. SQL Server 安装后部分选项初始化脚本

    SQL Server安装后,根据对应的业务场景,数据库实例的部分选项需要调整,例如实例的最大内存.tempdb 文件的增长量.Job执行记录数等等,但这一步经常被大家忽略掉. 其实很多选项初始化都可以 ...

  7. 【原】Oracle EBS 11无法打开Form及Form显示乱码的解决

    问题:Oracle EBS 11无法打开Form及Form显示乱码 解决: 1.尝试使用jre1.5或1.6安装目录下jre/bin/server目录里的jvm.dll替换JInitiator安装目录 ...

  8. 解决 win10飞行模式 无限自动开关 无法关闭

    驱动问题,名为“Insyde Airplane Mode HID Mini-Driver”的驱动,这个驱动是专门用来快捷管理飞行模式的. 卸载完成后重启,无限开关飞行模式问题得到解决!

  9. eclipse代码提示设置过常用字符还是不起作用的解决方法

    问题:重装eclipse之后发现没有了代码提示,一般情况下在设置中添加自动提示的字符之后就可以了,设置如下 如上图,初始的时候是只有一个点号,并没有字符,输入26个字母的大小写后点击Apply and ...

  10. 计算器模拟器中的情怀——Free42简介

    说到情怀,我首先想聊几句电子计算器的历史.电子计算器这种东西,在最近这几十年的人类发展中,曾经起到过相当重要的作用,尤其是在七十年代到九十年代初这个时期,大型的全功能电脑贵得要命,有钱有时也买不到,而 ...