WOW.js qui fait bouger la page

Cette fois, je vais vous proposer WOW.js qui fait bouger la page. Quelles sont les précautions pour WOW.js qui fait bouger la page. Voici un cas pratique, jetons un coup d'oeil.

## 简介有的页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 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 | 异步加载的内容是否有效 |

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture connexe :

Comment résoudre le bug selon lequel la zone de texte d'IE11 n'enveloppe pas ?

Un composant de chargement paresseux basé sur sur jquery

Comment personnaliser les paramètres utilisateur dans WebStorm

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!