WOW.js 动画使用

有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。

WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。

<script>
      if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
     new WOW().init();
     };
</script>

1、引入文件使用方法

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

2、HTML

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

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

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

  class="wow sildeInLeft" 这个表示就可以了,data-wow-duration=“2s”,

data-wow-delay="5s"   上图中的类名,以及后面的style样式都是动画执行过了,代码里面的显示的样子。

3、JavaScript

new WOW().init();

如果需要自定义配置,可如下使用:

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

配置

原文地址:https://www.cnblogs.com/agansj/p/8245415.html

时间: 2024-10-12 12:28:23

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文件里再写一

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

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

JS函数库:页面滚动过程中元素产生动画效果 WOW.js

官网 WOW.js依赖animate.css, 所以它支持animate.css多达60多种动画效果. 浏览器兼容:IE9以及以前的版本不适用 使用方法: 1.引入文件 <link rel="stylesheet" href="css/animate.min.css" /> <script type="text/javascript" src="js/wow.min.js"></script>

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

官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css. 2.Animate.css (下载https://daneden.github.io/animate.css/)非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画 使用方法 1.引入文件<link rel="stylesheet

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

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

一.(页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也能弄出来这种效果了. 虽然效果出来了,但是网上并没有整理好的各种特效对应的类名,所以写一篇通俗易懂(最起码自己能看懂)的文章供大家参考学习.(^_^) 二.首先说明一下怎么使用这个插件: 1.wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.c

WoW.js插件

时间:2017.11.02----2017.11.04 author: gaoxuerong 先上效果图点击这里 这是我在看WoW.js源码的时候写的,自己也是不理解,所以是边看,边百度,把自己查的资料整理下,由于本人能力有限,不能很好的讲解,就只是粗略的写了下, 开始总体看起来是(function(){}).call(this)讲解详见https://segmentfault.com/q/1010000002519489 其实[].indexOf和 function(item) {   for

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

官网:http://mynameismatthieu.com/WOW/ 建议去官网一看 下载地址:https://github.com/matthieua/WOW 浏览器兼容 IE10+  Chrome  Firefox  Opera  Safari  IE6.IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果:而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错.为了达到更好的兼容,最好加一个浏览器及版本判断. 1.wow.js依赖于animate.cs