WOW.js, das die Seite bewegt

Dieses Mal bringe ich Ihnen WOW.js, das die Seite bewegt. Was sind die Vorsichtsmaßnahmen für WOW.js, die die Seite verschieben? Hier ist ein praktischer Fall, schauen wir uns das an.

## 简介有的页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面（查看）。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。
WOW.js 依赖 [animate.css](http://www.dowebok.com/98.html "animate.css – 齐全的CSS3动画库")，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。## 浏览器兼容| ![IE](http://upload-images.jianshu.io/upload_images/7001495-d1498e252dc65170.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "IE")
 | ![Chrome](http://upload-images.jianshu.io/upload_images/7001495-200a062811a86de9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "Chrome")
 | ![Firefox](http://upload-images.jianshu.io/upload_images/7001495-7f10002341e8ae18.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "Firefox")
 | ![Opera](http://upload-images.jianshu.io/upload_images/7001495-368da504ba5af174.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "Opera")
 | ![Safari](http://upload-images.jianshu.io/upload_images/7001495-ec11892237adb9ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "Safari")
 |
 | --- | --- | --- | --- | --- |
 | IE10+ [图片上传失败...(image-85fa2d-1517475588948)]
 | Chrome [图片上传失败...(image-be4ec6-1517475588948)]
 | Firefox [图片上传失败...(image-a5ddfd-1517475588948)]
 | Opera [图片上传失败...(image-508f1e-1517475588948)]
 | Safari [图片上传失败...(image-5c656e-1517475588948)]
 |
IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。## 使用方法### 1、引入文件<pre class="brush:xml" style="margin: 0px; padding: 10px; max-height: 400px; border: 1px solid rgb(240, 240, 240); font-style: normal; font-variant: normal; font-weight: 400; font-stretch: normal; font-size: 13px; line-height: 24px; font-family: Consolas, "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace; background-color: rgb(248, 248, 248); overflow: auto; color: rgb(102, 102, 102); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><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>

### 3、JavaScript

new WOW().init();

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

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 | 异步加载的内容是否有效 |

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Verwandte Lektüre:

Wie behebt man den Fehler, dass der Textbereich von IE11 nicht umschließt?

Auf einer Lazy-Loading-Komponente basierend auf jquery

So passen Sie Benutzereinstellungen in WebStorm an

Das obige ist der detaillierte Inhalt vonWOW.js, das die Seite bewegt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!