Para los desarrolladores del sitio web, agregar un efecto deslizante o de carrusel al contenido de la pantalla es una necesidad muy común. Hay tantos complementos de carrusel pagados y gratuitos. Muchos de ellos ofrecen muchas opciones de configuración útiles y efectos dinámicos.
Muchas veces, si su proyecto necesita un carrusel liviano, no requiere muchas características. Al mismo tiempo, su proyecto es usar Bootstrap (el marco front-end de código abierto más popular). Puede consultar el componente oficial de Bootstrap.
Este artículo le mostrará cómo agregar efectos de animación interesantes al carrusel Bootstrap. Al mismo tiempo, asegúrese de que este componente JS se expanda libremente y se inicie rápidamente.
Introducción a Animate.css
Para hacer que el efecto de animación me escribí digno de alabanza, utilicé una biblioteca de animación CSS3 de código abierto muy famosa, que se llama vívidamente animate.css. Escrito por Dan Eden.
Este es el código que me permite centrarme en la tarea en cuestión, en lugar de explicar las animaciones CSS3.
Usar animate.css requiere 2 pasos:
1. Introducir animate.min.css en el documento HTML.
2. Agregue la clase animada de tuchosenanimation a los elementos para ser animación en la página web.
A continuación, usa el nombre de clase sobre animaciones que ve en el sitio web Animate.css para reemplazar su Echosenanimation.
Introducción del componente de carrusel de bootstrap
El componente Bootstrap Carousel tiene tres partes principales.
--- El carrusel indica el número de páginas que se muestran en la diapositiva , proporcionando al usuario una pista visual y proporcionando una navegación deslizante.
--- Entrada en el carrusel , una clase llamada.-Carousel-Inner, contenida en el borde exterior. Representa cada control deslizante independiente. Las imágenes se pueden colocar en cada imagen. También puede agregar un título. También puede agregar el nombre de la clase Carrusel-Saption en el elemento HTML. Bootstrap tendrá su propio estilo. Podemos agregar animaciones a través de estos elementos.
--- Finalmente, está la flecha de control del carrusel , que es la función que permite al usuario deslizarse hacia adelante y hacia atrás.
Para simplemente mostrar la demostración, no se agregarán imágenes. Concéntrese primero en el marco del carrusel como animación.
Construcción de estructura HTML
Estos son los que necesita citar en su proyecto:
jQuery
Bootstrap's CSS y JavaScript
Animate.css
Una hoja de estilo y documentación JS.
Para acelerar el proceso de desarrollo, las plantillas y los archivos necesarios se hacen referencia desde el sitio web oficial de Bootstrap.
A continuación se muestra el código de carrusel de bootstrap :
<div id = "Carusel-Example-Generic" Data-Ride = "Carousel"> <!-Indicadores-> <ol> <li Data-Target = "#Carousel-Example-Generic" Data-Slide-To = "0"> </li> <li Data-Target = "#Carousel-Expleamper-Genérico" data-target = "#carousel-exame-genérico" data-slide-to = "2"> </li> </ol> <!-wrapper para diapositivas-> <div role = "listbox"> <!-Primera diapositiva-> <div> <viv> <h3 data-animation = "animada bounctft"> Esta es la captura para la captura para 1 </h3> <h h3 data-animation = "animado" bounceInRight"> This is the caption for slide 1 </h3> <button data-animation="animated zoomInUp">Button</button> </div> </div><!-- /.item --> <!-- Second slide --> <div> <div> <h3 data-animation="animated bounceInDown"> <span></span> </h3> <h3 data-animation="animated BouncioNdown "> BounceUp"> Este es el título para la diapositiva 2 </h3> <botón data-animation = "animado zoominright"> botón </botón> </div> </div> <!-/.item-> <!-tercera diapositiva-> <div> <div> <h3 data-animation = "zoominleft animado"> <span> </span> </h3> <h3> <h3 h3 data-animation = "zoominleft animado"> <span> </span> </h3> <h3> <h3 h3 data-animation = "zoominleft animado"> <span> </span> </h3> <h3> <h3 h3 data-animation = "zoominleft animado"> <span> </span> </h3> h3> h3 data-animation = "animado flipinx"> Este es el título para la diapositiva 3 </h3> <botón data-animation = "animado de luz de luz"> botón </boton> </div> </div> <!-/.item-> </div> <!-/.carouselel-inner-> <!-Control-> <a href = "#carousel-exel-exel-exmample" Buttoner "Buttoner" Buttoner "Buttoner" Buttoner " data-slide = "anterior"> <span aria-hidden = "true"> </span> <span> anterior </span> </a> <a href = "#Carousel-Example-Generic" rol = "Button" data-slide = "next"> <span aria-hidden = "true"> </span> next </span> </a> </iv> <!-/.carousel-/.
Si el código anterior no está mal, verá un carrusel que puede funcionar al abrirlo en el navegador. Todo lo anterior no contiene una línea de código JavaScript. Si no agrega ninguna imagen,
Simplemente agregue el valor min-alojo al bloque de clase. CAROUSEL. Item en el documento CSS para evitar el colapso del carrusel.
Agregue una animación de animación de animación de datos a los elementos dentro del título del carrusel, utilizando esta biblioteca de animación especial como su valor.
Si desea experimentar otras animaciones de la biblioteca Animate.css, use el nombre de la clase de animación de su elección en lugar del valor de la propiedad de animación de datos.
Utilizamos el valor del atributo de animación de datos en el código JavaScript.
Aunque en algunos casos se puede encontrar un carrusel automático simple en algunos casos, tenemos más control sobre este caso.
En el primer paso en esta dirección, elimine el valor de datos de datos = "Carousel" del elemento e inicialice el valor del atributo de ride de datos sin escribir ningún código. Sin embargo, tenemos la intención de usar el código JS para controlar el carrusel, por lo que esta propiedad de viaje de datos es innecesaria.
Agregar estilo CSS al carrusel
Ahora use su creatividad para agregar estilos al título del carrusel de acuerdo con sus preferencias. Las reglas de estilo que voy a escribir son demostraciones que funcionan sin problemas.
Más específicamente, aumentamos el control de las propiedades de retraso de animación. Definir cuándo se inicia cada animación (tenga en cuenta que para una demostración simple, se omite el prefijo del navegador)
.Carusel-Caption H3: First-Child {Animation-Delay: 1s;}. Carrusel-Caption H3: NTH-Child (2) {Animation-Delay: 2s;}. Botón de aplicación de carrusel {Animation-Delay: 3S;};}En el fragmento de código anterior, asegúrese de que la animación del elemento comience de manera ordenada. Se pueden hacer otros efectos. Por ejemplo, puede seleccionar los dos primeros títulos que aparecerán al mismo tiempo. Luego está el botón del botón. Puedes decidir por ti mismo y divertirte.
Escribir código jQuery:
Comenzamos a inicializar este carrusel y agregar el código a su archivo JavaScript personalizado:
var $ myCarousel = $ ('#Carousel-exame-Generic'); // Inicializar Carousel $ myCarousel.Carousel ();Hemos configurado el carrusel dinámicamente, y luego, resolvamos esta animación.
Para animar el título de la primera diapositiva, el script debe ejecutarse después de que la página se cargue en el navegador. La presentación de diapositivas posterior ingresa a nuestro campo de visión en Animación, y nuestro código se ejecuta en el evento Slide.BS.Carousel. Lo que significa que el mismo código se ejecuta dos veces: la página se carga una vez y el evento de slide.bs.carusel una vez.
Debido a que nos gusta seguir el principio de no repetición, tenemos la intención de encapsular nuestro código en las funciones y hacerlas referirlos cuando sea apropiado.
Código:
función doAnimations (elems) {var animenDev = 'webkitanimationend animationend'; elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animation'); // agregue las clases de animate.css a // los elementos a ser animados // eliminar animate.css classes // $ this.removeclass ($ animationType); FunctionDoAnimations ($ FirstAnimatingElems); // Pausa la función CAROUSEL $ myCarousel.Carousel ('pausa'); // adjunte nuestra función doanimations () a la función // de slide.bs.barousel event $ mycarousel.on ('slide.bs.Carousel', function (e) {// select the elements to be the slide the slidein $ AnimatingElems = $ (e.relatedTarget) .find ("[Data-Animation ^= 'Animated']");Analicemos el código anterior.
Mire la función doanimations ()
Las tareas realizadas por esta función doanimations () son las siguientes.
Comienza por cadenas de caché que contienen el nombre del evento AnimationEd en la variable. Este evento nos dice que puede haber adivinado cuándo termina cada animación. Necesitamos información para este punto, porque después de que termine cada animación, eliminamos la clase Animate.css. Si no hacemos la eliminación, el título del carrusel solo tendrá una animación una vez, es decir, solo mostrar una diapositiva específica en el primer carrusel.
var animationEndev = 'webkitanimationend animationend';
A continuación, nuestra función buce a través de cada elemento, queremos tener animación y obtener el valor de la propiedad de la animación de datos. Piense en lo que se mencionó anteriormente, este valor contiene la clase Animate.css que queremos agregar al elemento para que tenga un efecto de animación.
elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animation'); // etc ...});Finalmente, la función doanimations () se suma dinámicamente a cada elemento de la clase Animate.css para ejecutar la animación. Cuando termina la animación, también se adjunta un evento que escucha. Después de que termina la animación, eliminamos la clase agregada de Animate.css. Esto asegura que el próximo carrusel regrese al área actual. (Intenta eliminar este código y vea lo que sucede)
$ this.addclass ($ animationType) .One (animenDev, function () {$ this.removeclass ($ animationType);});La primera animación de título
Cuando la página se carga en el navegador, animamos el contenido en la primera diapositiva:
var $ firstAnimatingElems = $ myCarousel.find ('. item: primero') .find ("[Data-animation ^= 'animado']"); doanimations ($ FirstAnimatingLems);En este código encontramos la primera luz, queremos obtener el valor del atributo de animación del título de la animación utilizando la animación de datos. Luego pasamos la variable $ FirstAnimatingElems como un parámetro a la función doanimations () y luego ejecutamos la función.
Función de parada de carrusel
Cuando se ha ejecutado el primer contenido de pantalla, detenemos esta función de carrusel.
$ myCarousel.Carousel ('pausa');
Esta es una característica en la que el componente Bootstrap Carousel previene la rotación constante. La rotación constante puede hacer que los visitantes sean infelices.
En este caso, recomiendo asegurarse de que el carrusel no llegue directamente a la siguiente luz hasta que todas las animaciones se ejecuten. Esto se puede controlar configurando la opción "Intervalo" en el código de inicialización:
$ myCarousel.Carousel ({intervalo: 4000});En mi opinión, un título de carrusel de bucle infinito salta cada vez que el deslizamiento a la vista no es ideal.
Animación de título de diapositivas de carrusel
Los pasos descritos a continuación deben ser visibles para el título animado de carrusel de cada diapositiva.
Primero, agregamos un oyente de eventos en slide.bs.carusel.
El evento dispara inmediatamente cuando se llama al método de instancia de diapositiva.
$ myCarousel.on ('slide.bs.carousel', function (e) {// hacer cosas ...});A continuación, seleccionamos las luces actuales y encontramos los elementos que queremos agregar animaciones. El siguiente código utiliza la propiedad .RelatedTarget del evento slide.bs.carusel para vincular la animación.
var $ animatingElems = $ (e.relatedTarget) .find ("[Data-animation ^= 'animado']");
Finalmente, llamamos a la función doanimations () y pasamos $ animatingElems como parámetro.
doanimations ($ animatingElems);
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Maravilloso intercambio de temas: jQuery Picture Carousel JavaScript Picture Carousel Bootstrap Picture Carousel
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.