guau.js

1. Introducción

Cuando algunas páginas se desplazan hacia abajo, algunos elementos producirán pequeños efectos de animación. Por ejemplo, cuando la barra de desplazamiento se desliza a una determinada posición, se puede mostrar la animación. wow.js se basa en animate.css , por lo que admite más de 60 tipos de efectos de animación en animate.css, que pueden satisfacer sus diversas necesidades.

IE6, IE7 y otros navegadores antiguos no son compatibles con la animación CSS3, por lo que no tiene ningún efecto, y wow.js también usa el método querySelectorAll, y la versión anterior de IE informará un error. Para lograr una mejor compatibilidad, es mejor agregar un navegador y un juicio de versión.

wow.js es un marco js para la animación de desplazamiento de la página web. Se puede usar con animate.css para liberar el efecto de animación animate.css durante el desplazamiento de la página web .

Dirección del sitio web oficial: mynameismatthieu.com - contacto con el propietario del dominio | Epik.com >

Dirección de descarga del código fuente: https://github.com/matthieua/WOW

Compatibilidad: Igual que animate.css

Documentación: Revelar animaciones al desplazarse — WOW.js

2. Pasos para usar

Pasos para usar:
1 Importe el archivo animate.css y el archivo wow.js
(los efectos especiales de animate.css se refieren a Redirigir a Animate.css )

2 Escribir estructura html

Agregue dos nombres de clase al elemento que se desplazará

<div class="wow slideInLeft" 
	data-wow-duration="2s" //动画持续时间
	data-wow-offset="10"  //动画延迟时间
	data-wow-iteration="10">//动画执行次数
</div>

wow (declarar elementos usando animación mixta)

nombre de la animación (nombre de la animación para la liberación de desplazamiento)

3 Inicializar wow: nuevo WOW().init()

La siguiente tabla muestra parte de los nombres de clase correspondientes y sus efectos:

nombre de la clase	efecto de animacion
wow slideInUp	De abajo hacia arriba, fijo en la posición establecida después de subir, la transparencia es la misma que el valor establecido (arriba es de abajo hacia arriba) (si el elemento está en la parte inferior, expandirá la altura del cuadro)
wow deslizar hacia abajo	De arriba a abajo, fijo en la posición establecida después de subir, la transparencia es la misma que el valor establecido
wow deslizar hacia la izquierda	De izquierda a derecha, fijo en la posición establecida después de subir, la transparencia es el valor establecido sin cambios (la izquierda es de izquierda a derecha)
wow deslizar hacia la derecha	De derecha a izquierda, fijo en la posición establecida después de subir, la transparencia tiene el valor establecido sin cambios
wow rollin	De izquierda a derecha, desplácese en el sentido de las agujas del reloj, la transparencia cambia del 100 % al valor establecido
wow rebote	Aparece desde la posición original, cambia de pequeño a grande más allá del valor establecido, luego se vuelve más pequeño que el valor establecido y luego vuelve al valor establecido, y la transparencia cambia del 100% al valor establecido
guau rebota	De abajo hacia arriba, después de saltar, subirá una parte y luego rebotará, la transparencia es la misma que el valor establecido
wow rebote hacia abajo	De abajo hacia arriba, después de saltar, subirá una parte y luego rebotará, la transparencia es la misma que el valor establecido
wow rebote a la izquierda	De izquierda a derecha, después de moverse, excederá una parte a la derecha y luego se deslizará hacia la izquierda, la transparencia es la misma que el valor establecido
wow rebote en la derecha	De derecha a izquierda, después de moverse, excederá una parte a la izquierda y luego se deslizará hacia la derecha, la transparencia es la misma que el valor establecido
wow lightSpeedIn	De derecha a izquierda, la cabeza se inclina primero hacia la derecha, luego hacia la izquierda y finalmente cambia a la forma original, y la transparencia cambia del 100% al valor establecido
vaya pulso	La posición original se amplía un poco y luego se reduce al tamaño original, y la transparencia permanece igual que el valor establecido (es mejor cooperar con el atributo de tiempos de ejecución de la animación)
guau flipInX	La posición original se inclina hacia atrás y se planta hacia adelante, y la transparencia cambia del 100 % al valor establecido
guau flipInY	Gire la posición original a la izquierda y a la derecha, la transparencia cambia del 100% al valor establecido
vaya rebote	Agite hacia arriba y hacia abajo, y la transparencia permanece sin cambios en el valor establecido (cooperando con los tiempos de ejecución de la animación y los atributos de duración de la animación para lograr una agitación violenta o lenta)
guau batido	Agite hacia la izquierda y hacia la derecha, y la transparencia permanece igual que el valor establecido (cooperando con los tiempos de ejecución de la animación y los atributos de duración de la animación para lograr una agitación violenta o lenta)
vaya columpio	De derecha a izquierda, la cabeza se inclina primero hacia la derecha, luego hacia la izquierda y finalmente cambia a la forma original, y la transparencia permanece igual que el valor establecido
wow rebotaInU	La posición original permanece sin cambios, directamente de no visualización a visualización (sin efecto de transición)
vaya bamboleo	La posición original permanece sin cambios, similar a una persona parada allí moviendo la cabeza hacia la izquierda y hacia la derecha, y la transparencia permanece igual que el valor establecido

demostración de código:

<!DOCTYPE html>
<html>
<head>
	<title>wow演示</title>
	<meta charset="utf-8">
 
	<!-- 1.引入wow依赖的animate.css -->
	<link href="css/animate.css" rel="stylesheet" type="text/css">
	<!-- 2.引入wow.js 文件 -->
	<script type="text/javascript" src="js/wow.js"></script>
	<!-- 3.now 对象 -->
	<script type="text/javascript">
		new WOW().init();
		// 可选的参数
		// wow = new WOW({
		//     boxClass:     'wow', 		//WOW.js需要执行动画的元素的class    
		//     animateClass: 'animated',   //animation.css 动画的 class
		//     offset:       0,            //距离可视区域多少开始执行动画    
		//     mobile:       true,  		//是否在移动设备上执行动画     
		//     live:         true        	//异步加载的内容是否有效
		// })
		// wow.init();
	</script>
</head>
<body>
	<div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s" data-wow-offset="1000"  data-wow-iteration="1" style="width: 500px;height: 2000px;background-color: #ccc;position: absolute;left: 50%;margin-top: 0px;margin-left: -250px;margin-bottom: 50px">
		wow 动画演示
	</div>	
	<!-- slideInLeft         动画样式 -->
	<!-- data-wow-duration   动画持续时间 -->
	<!-- data-wow-delay      动画延迟时间 -->
	<!-- data-wow-offset	 元素的位置（左上角的位置）露出后距离底部多少像素时执行 -->
	<!-- data-wow-iteration  动画执行次数 -->
</body>
</html>

Suplemento:
data-wow-duration (duración de la animación) en segundos/s
data-wow-delay (tiempo de retraso de la animación) en segundos/s
data-wow-offset (cuántos píxeles desde la parte inferior después de que se expone la posición del elemento) ) La distancia desde la parte superior del elemento hasta la parte inferior de la animación del área visible (contenedor) (usada para establecer la posición de apariencia de la animación en la página) El
valor de la iteración de datos (tiempos de ejecución de la animación) es un puro número e infinito significa reproducción en bucle

3. Presta atención

Los efectos de animación WOW.JS no se pueden repetir y solo se pueden mostrar una vez

scrollReveal.js

scrollReveal.jsWOW.jsAl igual que , scrollReveal.jstambién es un complemento que se desplaza y muestra animaciones en la página JavaScript, lo que puede hacer que la página sea más interesante y atraer la atención de los usuarios. La diferencia es WOW.jsque las animaciones de solo se reproducen una vez, scrollReveal.jsmientras que las animaciones de se pueden reproducir una vez o infinitamente; WOW.jsdependen de animate.css, scrollReveal.jsno de ningún otro archivo. Aunque scrollReveal.jsno depende de animate.css, sus animaciones también se CSS3crean , por lo que no es compatible con IE10los siguientes navegadores.

Dirección del sitio web oficial: https://scrollrevealjs.org/
GitHub: https://github.com/scrollreveal/scrollreveal

1. llamar

Puede establecer el efecto para todos los objetos, es decir, configurar el objeto scrollReveal,

<script>
    var config ={
        reset: true,          //是否重新执行动画
，默认不重复（一次性动画）
        enter: "left" ,       //动画开始的方向
        move: '200px',         //移动多少像素
        over: "0.5s",         //动画持续时间
        after: "0s",          //延迟
        opacity: 0,           //初始透明度
    };
    var sr = new scrollReveal(config);
</script

También puede configurar el efecto para un objeto individualmente

<style>
        ul{
            padding: 0;
            list-style: none;
        }
        .box{
            width: 500px;
            /*background: pink;*/
            margin: 0 auto;
            /*overflow: hidden;*/
        }
        li{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            margin-bottom: 30px;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
    </style>
    <script src="js/sr/scrollReveal.js"></script>
/*要引入包*/
<ul class="box">
    <li data-scroll-reveal class="left"></li>
    <li data-scroll-reveal class="right"></li>
    <li data-scroll-reveal class="left"></li>
    <li data-scroll-reveal class="right"></li>
    <li data-scroll-reveal class="left"></li>
    <li class="right" data-scroll-reveal="enter right move 100px over .5s after 1s">添加</li>
    <li data-scroll-reveal class="left"></li>
    <li data-scroll-reveal class="right"></li>
    <li data-scroll-reveal class="left"></li>
    <li data-scroll-reveal class="right"></li>
   
</ul>
    <script>
        var config ={
            reset: true,          //是否重新执行动画
            enter: "left" ,       //动画开始的方向
            move: '200px',         //移动多少像素
            over: "0.5s",         //动画持续时间
            after: "0s",          //延迟
            opacity: 0,           //初始透明度
        };
        var sr = new scrollReveal(config);
    </script>
</body>

Resumir:

La comparación entre wow.js y scrollreveal.js
1 no depende de jquery;

2 La animación de WOW.js solo se reproduce una vez, mientras que la animación de scrollReveal.js se puede reproducir una vez o infinitamente ;

3 WOW.js depende de animate.css, mientras que scrollReveal.js no depende de ningún otro archivo;

4 WOW.js depende de animate.css, más efectos de animación

Biblioteca de animación Wow.js y scrollReveal.js Use una explicación detallada y ventajas y desventajas