Cómo crear efectos de animación CSS3 en el código de muestra de Swiper

Swiper es un marco liviano y gratuito para controles deslizantes táctiles en dispositivos móviles que utilizan transiciones aceleradas por hardware (si el dispositivo lo admite). Se utiliza principalmente en sitios web móviles, aplicaciones web y aplicaciones nativas. Está diseñado principalmente para IOS, pero también ofrece una buena experiencia de usuario en Android, WP8 y navegadores de escritorio modernos.

Este artículo le presenta el contenido de producción de los efectos de animación CSS3 en Swiper y lo comparte con usted como referencia y aprendizaje. No entraré en más detalles a continuación, echemos un vistazo a la introducción detallada. .

1. Introduzca la siguiente versión del archivo correspondiente a la página donde necesita agregar efectos de animación

lt;script src=".../js/swiper.min.js" gt;lt ;/scriptgt;

lt;script src=".../js/jquery-1.9.1.js"gt;lt;/scriptgt;

lt; link rel= "stylesheet" href="./css/animate.min.css" rel="external nofollow" gt;

2, y luego agréguelo a la parte js de la página (de acuerdo con requisitos comerciales)

var mySwiper = new Swiper('.swiper-container', {

reproducción automática: 5000, //tiempo de reproducción automática

paginación: '. swiper-pagination',

//pagination: '#swiper-pagination1',

onInit: function(swiper) {//Realizar animación cuando se inicializa la rotación

swiperAnimateCache(swiper);

swiperAnimate(swiper);

},

onSlideChangeEnd: function(swiper) {//Reejecutar cuando la rotación cambia al último

swiperAnimate(swiper);

}

})

3. el elemento que necesita ser animado:

Agrega una clase ("ani", "animated") encima del elemento que necesita ser animado

Luego puedes agregar algunas animaciones proporcionado por animate.css

Si en animate.css La animación no satisface sus necesidades, puede agregar otras animaciones. p> También puedes configurar algunos parámetros en el elemento

swiper-animate-effect: efecto de cambio, por ejemplo, fadeInUp

swiper-animate-duration: opcional, duración de la animación (swiper -animate-delay: opcional, duración de la animación (en segundos), por ejemplo, 0,5 s

animate-delay: opcional, tiempo de retraso de la animación (en segundos), por ejemplo, 0,3 s

4. Las siguientes situaciones

Enlace de referencia: /usage/animate/index.html

Resumen