Wow se da cuenta del efecto de mostrar una animación cuando la página se desplaza al área especificada

WOW.js es un complemento de efectos de animación muy liviano, con el que puede combinar una variedad de efectos geniales.
El uso de WOW.js puede realizar el efecto de animación que a menudo vemos en el sitio web, cuando la página se desplaza al área especificada.

1. Descarga el archivo

animate.css 下载地址: http://daneden.github.io/animate.css/   https://github.com/matthieua/WOW/tree/master/css/libs
wow.js 下载地址:  https://github.com/matthieua/WOW

Nombre del estilo de animación animado: https://animate.style/

2. Importar archivos

<link rel="stylesheet" href="animate.css">
<script src="wow.js"></script>
<script>
   new WOW().init();//wow是大写哦
</script>

3. Agregue, wow y sus elementos de animación en la etiqueta que necesita animación, el siguiente código:

<div class="row">
    <div class="wow rollIn bg-blue animated" >22</div>//rollIn 动画名称
    <div class="wow bounceInDown bg-red animated" data-wow-iteration="1" data-wow-duration="2.15s">22</div>
    <div class="wow slideInLeft bg-red animated" data-wow-iteration="1" data-wow-duration="2.15s">22</div>
//data-wow-iteration重复次数    data-wow-duration动画过程时间

Descripción de propiedad:

a) la clase debe contener clase wow

b) La clase debe contener
la clase de efecto de animación en animate.css. Para ver el estilo de efecto de animate.css, consulte: http://www.jq22.com/yanshi819

c) Atributo: duración de la animación data-wow-duration

d) Atributo: tiempo de ejecución del retraso de la animación data-wow-delay, por ejemplo, la animación se ejecuta después de 5 segundos

e) Atributo:
la posición del elemento data-wow-offset está expuesto, cuántos píxeles desde la parte inferior para ejecutar (por ejemplo, quiero que el contenido muestre 100 píxeles antes de realizar la animación)

f) Atributo: el número de veces que se ejecuta la animación de iteración de datos-wow

Cargar código JS:

 if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    
     //不在ie6-9中使用
     new WOW().init();
 };