美文网首页framework
如何使用WOW.js库

如何使用WOW.js库

作者: w_tiger | 来源:发表于2017-01-05 20:25 被阅读0次

简介

Wow.js是一个不依赖于jQuery的轻量级js库,其作用就是能够在网页不断往下滚动的时候逐渐释放通过animateCSS添加的这些动画。

注意:必须和animateCSS配合使用。

浏览器兼容性

IE10+     谷歌     火狐     opera    safari

用法步骤

1、引入文件

<link rel="stylesheet" href="animate.min.css"> 

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

2、HTML
<div class="wow slideInLeft"></div> 

<div class="wow slideInRight"></div>

3、JavaScript

new WOW().init();

wow属性

属性是指写在HTML身上的

data-wow-delay       延迟

data-wow-duration   动画持续的时间

data-wow-iteration   动画重复的次数

data-wow-offset       距离浏览器底部到隐藏框顶部的距离,如下贴图

配置参数

相关文章

  • 如何使用WOW.js库

    简介 Wow.js是一个不依赖于jQuery的轻量级js库,其作用就是能够在网页不断往下滚动的时候逐渐释放通过an...

  • wow.js的使用方法

    wow.js简介 功能: 滚动页面, 显示css动画 和animate.css配合使用 wow.js基本使用 基本...

  • 动画插件wow.js的使用

    wow.js使用步骤: 1.wow.js插件可以使页面形成各种各样的动画效果。 2.使用步骤: wow.js依赖于...

  • wow.js使用教程

    设置WOW.js 1.引入css动画库 2.引入wow.js并且初始化 显示CSS动画 1.设置css类 将CSS...

  • 【WOW.js】Animate.css的黄金搭档

    本节目录 WOW.js简介 WOW.js基础用法 【简介】 WOW.js的出现,让Animate.css有更多可玩...

  • WOW初入门

    WOW.js的使用入门,什么是WOW首先在github上下载,http://mynameismatthieu.co...

  • 插件的运用

    常用的插件:wow、Swiper、lightbox、fullpage wow使用步骤:第一步拷贝 wow.js a...

  • WOW.js 使用教程

    不多说先看效果WOW官网是不是觉得很有趣,这样小小的一款插件就能做出这么多动画效果。一些小小的细节效果能为网站增色...

  • php7 环境 phalcon 如何使用 mongodb 数据库

    php7 环境 phalcon 如何使用 mongodb 数据库 phalcon 如何使用 mongodb 数据 ...

  • Torchtext使用教程

    Torchtext使用教程 主要内容: 如何使用torchtext建立语料库 如何使用torchtext将词转下标...

网友评论

    本文标题:如何使用WOW.js库

    本文链接:https://www.haomeiwen.com/subject/ffozvttx.html