WOW.js 使用教程

官网加动画特效,哇哦,下面我介绍一下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

原文地址:https://www.cnblogs.com/linjiu0505/p/10605543.html

时间: 2024-10-13 20:48:44

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

wow.js动画使用方法

不多说先看效果 WOW官网 是不是觉得很有趣,这样小小的一款插件就能做出这么多动画效果. 一些小小的细节效果能为网站增色不少,下面就让我们来学习如何使用这款插件. 使用教程 wow.js依赖于animate.css,首先需要在 head内引入animate.css或者animate.min.css. <link rel="stylesheet" href="css/animate.css"> 引入wow.js或者wow.min.js,然后js文件里再写一

css3特效插件wow.js

在使用css3写特效的时候,会遇到比较麻烦的就是css3代码需要大量的调试,但是现在有了wow.js,让写特效变得简单了很多. wow.js官网 https://www.delac.io/wow/index.html 使用教程: 第一步:wow.js依赖于animate.css,首先需要在  head内引入animate.css或者animate.min.css. <link rel="stylesheet" href="css/animate.css">

wow.js使用方法

近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个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",具体所表示的含

关于wow.js个参数的详解

1.从哪里下载插件?animate.css 下载地址: http://daneden.github.io/animate.css/wow.min.js 下载地址: http://www.downyi.com/downinfo/37040.html#address 2.如何使用? <link rel="stylesheet" href="css/animate.css"> <script src="js/wow.min.js"&g

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

JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程和在线指南.这些资源对于任何想要学习更多的关于 Node.js 的知识的开发人员都是很有用的. 您可能感兴趣的相关文章 经典网页设计:超炫动画效果单页网站 30个独具匠心的精美单页网站设计案例 25个以全屏照片为背景的精美网页作品 20个与众不同的网页联系表单设计案例 20个模糊背景在网站中的经典应

使用Animate.css和wow.js,实现各大网站常用的页面加载动画

经常见到某个网站的动画是在屏幕显示到This元素的时候,会有个过渡动画. 主要区别于在普通页面是在页面加载完成后所有动画一起动,或者设置延迟时间. 而这两个插件混搭使用可以是页面现在到该元素时才加载动画.拥有非常不错的效果. 算个比较常见的交互效果,研究了一下午,主要使用以下两个插件完成. 1.wow.js 实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css. 2.Animate.css 非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画 用法: <link

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—引用传递

<饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview 1.如何编写一个 json 对象的拷贝函数 function clone(obj){ var result; if (Array.isArray(obj)) { result = []; obj.forEach((item) => { result.push(clone(item)); }); } else if (typeof obj === 'objec

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—作用域

<饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview 作用域从某种意义上来说是个难点,它需要你真真正正的了解JS的分词.词法分析,语法分析,代码生成,LHS查询,RHS查询等深层的东西. 如果不知道可以读一下<你不知道的JavaScript:上卷> let和var的区别 1.let只在声明的代码块中有效,{}中使用let声明变量,外面是访问不到的,这就是块级作用域 2.不存在变量提升问题 3.重复声明会报

Google Chrome 调试JS简单教程[更新]

题外话,刚开始我写这篇内容只是将自己了解的一些知识放上来,不巧的是我分析了我的来访日志,很多朋友都有这个需求,为了大家没有白来,我决定充实下这篇文章.最近更新时间2014-02-14 chrome版本: 32.0.1700.107 m 我是一名忠实Chrome迷,使用它已经快有2年的历史了,整体给我的感觉就是清爽,快速,简洁.又打小广告了……^_^,虽然我知道IE8+也有调试工具,包括火狐的什么XXBUG,但是我用过之后,个人还是十分偏爱chrome的debug. chrome对于在前端打拼的兄