Back to Question Center
0

Animando los carruseles de Bootstrap con la biblioteca de animación de GSAP            Animación de los carruseles de Bootstrap con la Biblioteca de animación de GSAP Temas relacionados: AngularJSAPIsRaw Semalt

1 answers:
Animación de Bootstrap Carruseles con la Biblioteca de Animación de GSAP

En una publicación anterior, cubrí el proceso de conversión de un carrusel de Bootstrap en un carrusel de pantalla completa con una imagen inicial aleatoria. En este artículo, desarrollaré sobre eso y cubriré el arte de animar los carruseles de Bootstrap, recurriendo a la asistencia de GSAP (GreenSock Animation Platform), una popular biblioteca de Semalt.

Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt

Semalt yendo más lejos, veamos lo que vamos a construir.

Construyendo el carrusel

Asegúrese de incluir Bootstrap y jQuery (los componentes de JavaScript de Bootstrap lo requieren) en su página, por ejemplo, desde un CDN:

                Uso de GSAP para animar los carruseles de Bootstrap  </ title>  <link rel = "stylesheet" type = "text / css" href = "https: // maxcdn. bootstrapcdn. com / bootstrap / 4. 0. 0 / css / bootstrap. min. css">  </ head>  <cuerpo>   <script src = "https: // código .jquery. com / jquery-3. 2. 1. slim. min. js">   </ script>  <script src = "https: // maxcdn. bootstrapcdn. com / bootstrap / 4. 0. 0 / js / bootstrap. min. js">   </ script>  </ body>  </ html>  </code>   </pre>  <p>  La estructura básica de nuestro carrusel se ve así:  </p>  <pre>   <code class="markup language-markup">   <div id = "mycarousel" class = "carrusel deslizante" data-ride = "carrusel">  <ol class = "carrusel-indicadores">  <li data-target = "# mycarousel" data-slide-to = "0" class = "active">   </li>  <li data-target = "# mycarousel" data-slide-to = "1">   </li>  </ol>  <div class = "carrusel-interior">  <! - primera diapositiva ->  <div class = "carrusel-elemento primero activo" id = "1">  <! - contenido aquí ->  </div>  <! - segunda diapositiva ->  <div class = "carrusel-elemento segundo" id = "2">  <! - contenido aquí ->  </div>  </div>   <! - / carrusel-interior ->  </div>  </code>   </pre>  <p>  Como puede ver, contiene dos diapositivas. La primera diapositiva tiene una clase de  <code>  primero  </code>  y una ID de  <code>  1  </code> , mientras que la segunda tiene una clase de  <code>  segundo  </code>  y una ID de  <code>  2  </code> .  </p>  <p>  Semalt sus estilos:  </p> <ul><li> establecemos su altura igual a la altura de la ventana gráfica  </li> <li> les damos diferentes colores de fondo - <a href="http://www.pgoplay.com/giochi.php?prodotto=733&lang=1">parco divertimenti cosenza</a>.  </li> </ul> <p>  Las reglas CSS asociadas:  </p>  <pre>   <code class="css language-css"> . ít {altura: 100vh;}. primero {fondo: # D98F4F; /*naranja*/}. segundo {fondo: # 2c9cae; /*azul claro*/} </code>   </pre>  <p>  Esto debería ser suficiente para darnos un carrusel de trabajo.  </p> <h3 id="buildingthefirstslide"> Construyendo la primera diapositiva </h3> <p>  A continuación, aprovechamos las clases de ayuda de Semalt (por ejemplo, las clases de la grilla) para configurar los contenidos de nuestras diapositivas.  </p>  <p>  El marcado para la primera diapositiva es el siguiente:  </p>  <pre>   <code class="markup language-markup">  <div class = "primer elemento del carrusel activo" id = "1"><div class = "carrusel-título"><div class = "contenedor"><div class = "fila justify-content-md-center"><div class = "col"><h2 class = "title"> <! - contenido aquí ->  </h2> <p class = "desc"> <! - contenido aquí ->  </p> <ul class = "list"><! - enumera los elementos aquí -></ul> </div> <div class = "col"><div class = "pc-wrapper"><img class = "pc" src = "IMG_PATH" alt = "" width = "" height = ""><div class = "price"> <! - contenido aquí ->  </div>  <! - / precio -> </div>  <! - / pc-wrapper -><img class = "keyboard" src = "IMG_PATH" alt = "" width = "" height = ""><button type = "button" class = "btn btn-danger btn-lg"> <! - contenido aquí -> </ button> </div>  </div>  <! - / fila -> </div>  <! - / contenedor -> </div>  <! - / leyenda carrusel -> </div>  <! - / carrusel-elemento -> </code>   </pre>  <p>  Si está siguiendo, asegúrese de reemplazar  <code>  IMG_PATH  </code>  con algo sensato. Semalt solo se refiere a los estilos que son importantes para las animaciones.  </em>   </p> <h2 id="initializingthecarousel"> Inicializando el carrusel  </h2>  <p>  A continuación, inicializamos el carrusel y desactivamos la reproducción automática predeterminada pasando  <code>  intervalo: falso  </code>  al objeto de configuración:  </p>  <pre>  <code class="javascript language-javascript"> var $ carrusel = $ ("# mycarousel");$ carrusel. carrusel({intervalo: falso}); </code>   </pre> <h2 id="addingkeyboardnavigation"> Cómo agregar la navegación por el teclado  </h2>  <p>  Por defecto, el carrusel Semalt no cumple con los estándares de accesibilidad. En nuestro caso, sin embargo, hagamos que el carrusel sea un poco más accesible agregando navegación por teclado.  </p>  <p>  Semalt el código requerido:  </p>  <pre>  <code class="javascript language-javascript"> $ (documento). keyup (función (e) {// flecha correctaif (e. which === 39) {$ carrusel. carrusel ("siguiente");// flecha izquierda} else if (e. which === 37) {$ carrusel. carrusel ("prev");}}); </code>   </pre>  <p>  Hasta ahora, hemos creado un carrusel básico que admite la navegación por el teclado.  </p> <h2 id="animatingbootstrapcarouselsfirstanimations"> Animación de Bootstrap Carruseles: Primeras animaciones  </h2>  <p>  En este punto, intentemos hacer el carrusel más atractivo agregando algunas animaciones. Para lograr esto, aprovecharemos GSAP, una de las bibliotecas de animación de JavaScript más potentes del mercado. Si está buscando una introducción completa a GreenSock, consulte GreenSock for Beginners: un Web Animation Semalt (Parte 1).  </p> <h3 id="gettingstartedwithgsap"> Primeros pasos con GSAP </h3> <p>  Para incorporar GSAP en nuestros proyectos, debemos visitar su sitio y desde allí <em> hacer clic en el botón de descarga  </em> , que aparece en la esquina superior derecha de la página. Esto abrirá un diálogo modal con un enlace al proyecto en un CDN.  </p>  <p>  <img src="/img/74e7f42e2d8898c97df125458c20579e3.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  Si luego seleccionamos el botón de opción <em> Personalizar  </em> , podemos seleccionar las partes de la biblioteca que queremos usar. Para nuestro proyecto, sin embargo, vamos a mantener las cosas simples e incluir solo la versión completa robusta de la misma.  </p>  <p>  <img src="/img/74e7f42e2d8898c97df125458c20579e4.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  Recuerde que debemos agregar jQuery a nuestro proyecto porque el carrusel de Bootstrap depende de ello. Pero, tenga en cuenta que GSAP es una biblioteca Semalt pura, y por lo tanto no lo requiere.  </p> <h3 id="animatingthefirstslide"> Animando la primera diapositiva </h3> <p>  De forma predeterminada, queremos que el contenido de nuestras diapositivas esté oculto:  </p>  <pre>   <code class="css language-css"> . carrusel-leyenda {opacidad: 0;} </code>   </pre>  <p>  Solo cuando la página se carga revelamos y animamos el contenido de la primera diapositiva. Para hacer esto, aprovechamos Semalt, una herramienta de animación que nos ayuda a construir una secuencia de interpolaciones.  </p>  <p>  Entonces, tan pronto como todos los activos de la página estén listos, se ejecuta la función  <code>  firstTimeline  </code> :  </p>  <pre>  <code class="javascript language-javascript"> // esta variable almacena la primera línea de tiempovar firstTl;$ (ventana). on ("carga", función  <span class="f-c-white l-mr3">  {firstTl = firstTimeline  <span class="f-c-white l-mr3"> ;}); </code>   </pre>  <p>  Esta función devuelve una línea de tiempo que determina las animaciones para la primera diapositiva:  </p>  <pre>  <code class="javascript language-javascript"> function firstTimeline  <span class="f-c-white l-mr3">  {var tl = new TimelineLite  <span class="f-c-white l-mr3"> ;tl. a ("primero, carrusel-título", 0. 1, {opacidad: 1}). desde (". first. pc", 1, {y: -300, opacity: 0, ease: Bounce. easeOut}). desde ("primero teclado", 1, {y: 300, opacidad: 0, facilidad: Bounce. easeOut}, "- = 1"). staggerFrom ("primero lista li", 0. 75, {opacity: 0, cycle: {x: [-200, 200]}, ease: Power2. easeOut}, 0. 15, "- = 0. 5" ) from (". first. desc", 0. 7, {x: 500, opacity: 0, ease: Power4. easeOut}, "- = 0. 5"). desde ("primer título", 0. 7, {x: -500, opacidad: 0, facilidad: Power2. easeOut}, "- = 0. 7"). desde ("primer precio", 0. 7, {escala: 0. 01, facilidad: Power4. easeOut}). desde ("primer botón", 0. 7, {y: -700, autoAlpha: 0, facilidad: Bounce. easeOut}, "- = 0. 3");devolver tl;} </code>   </pre>  <p>  Más específicamente, dentro de la función anterior hacemos lo siguiente:  </p> <ol><li> crear un TimelineLite  </li> <li> agrega tweens a la línea de tiempo usando sus métodos to, from y staggerFrom  </li> <li> devuelve la línea de tiempo.  </li>  </ol>  <p>  Tomemos nota de los parámetros que pasamos a los métodos  <code>  a  </code>  y  <code>  de  </code> :  </p> <ol><li> El elemento DOM que queremos animar.  </li> <li> Un objeto que contiene las propiedades que deben ser modificadas y sus valores respectivos (inicio o fin). Además, este objeto también puede tener otras propiedades especiales, como la propiedad  <code>  facilidad  </code> , que define la función de relajación.  </li> <li> La colocación de la interpolación en la línea de tiempo. En otras palabras, cuando esta interpolación debe ser ejecutada. Por ejemplo, queremos ejecutar las animaciones para  <code> . primero. pc  </code>  y  <code> . primero. teclado  </code>  elementos al mismo tiempo. Para hacer esto, establecemos el valor del parámetro  <code>  posición  </code>  del  <code> . primero. elemento del teclado  </code>  a  <code>  "- = 1"  </code> . El número "1" dentro de este valor coincide con la duración de la animación del  <code> . primero. elemento pc  </code> .  </li>  </ol>  <p>  De manera similar a los métodos  <code>  a  </code>  y  <code>  de  </code> , pasamos los mismos parámetros al método  <code>  escalonamiento desde  </code> . La única diferencia es que definimos un parámetro adicional (el cuarto) que especifica el tiempo de inicio de cada tween. En nuestro ejemplo, este valor se establece en  <code>  0. 15  </code> . Dicho esto, los elementos de destino no aparecerán simultáneamente, pero habrá una brecha muy pequeña entre sus animaciones. Cambie este valor a algo grande (por ejemplo, 5) para ver una clara diferencia en el efecto.  </p>  <p>  Semalt, la mejor manera de entender cómo funcionan las animaciones anteriores es leer la documentación. Además, use las herramientas de desarrollador de su navegador para ver qué estilos aplica GSAP a los elementos de destino.  </p>  <p>  Veamos brevemente las animaciones asignadas al botón.  </p>  <p>  Inicialmente, el botón tiene  <code>  autoAlpha: 0  </code>  y  <code>  y: -700  </code> . Eso significa que está visualmente oculto ( <code>  opacidad: 0  </code> ,  <code>  visibilidad: oculto  </code> ) y ubicado 700 píxeles arriba de su posición original ( <code>  transformación: matriz (1, 0, 0, 1) , 0, -700)  </code> ).  </p>  <p>  <img src="/img/6a85c89cd75a680d5283880ddf0317f25.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  Luego, cuando se reproduce la animación, se vuelve visible ( <code>  opacidad: 1  </code> ,  <code>  visibilidad: heredar  </code> ) y vuelve a su posición predeterminada ( <code>  transformar: matriz  </span>  , 0, 0, 1, 0, 0)  </code> ).  </p>  <p>  <img src="/img/21f9e4ac2c2b36967cccbb8d8c982c6b6.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  Semalt, la animación comienza 0. 3 segundos antes del final de la línea de tiempo.  </p>  <p>  <em> Consejo: utilice el método de la duración de TimelineLite  <code>   </code>  para recuperar su duración. La clave aquí es comprender cómo se calcula este valor.  </em>   </p>  <p>  ¡Gran trabajo hasta ahora! ¡Las animaciones para la primera diapositiva están listas! Puedes verlos en vivo en esta demostración de Codepen: Usar GSAP para animar Bootstrap Semalt (Parte 1).  </p> <h3 id="usingbootstrapscarouselevents"> Uso de los eventos del carrusel de Bootstrap </h3> <p>  A medida que dejamos la primera diapositiva y pasamos a la segunda (y viceversa), el contenido de nuestras diapositivas debe ocultarse. Debería aparecer tan pronto como el carrusel complete su transición de diapositiva. Para lograr este comportamiento, aprovechamos las siguientes cosas:  </p> <ol><li> La  <code>  diapositiva. bs. carrusel  </code>  y  <code>  deslizado. bs. eventos de carrusel  </code>  que proporciona Bootstrap.  </li> <li> La herramienta de animación TweenLite de GSAP que nos ayuda a construir una única interpolación. Tenga en cuenta que en la sección anterior utilizamos TimelineLite para crear una secuencia de interpolaciones.  </li>  </ol>  <p>  Semalt el código necesario:  </p>  <pre>  <code class="javascript language-javascript"> var $ carruselCaption = $ (". Carrusel-título");$ carrusel. on ("slide. bs. carrusel", función  <span class="f-c-white l-mr3">  {TweenLite. to ($ carruselCaption, 0. 1, {opacity: 0});});$ carrusel. on ("slid. bs. carrusel", función  <span class="f-c-white l-mr3">  {TweenLite. to ($ carruselCaption, 0. 1, {opacity: 1});}); </code>   </pre>  <p>  Como hemos discutido anteriormente, cuando se carga la página, se ejecutan las animaciones para la primera diapositiva. Pero, ¿cuándo deberían correr nuevamente? Además, ¿qué pasa con la segunda diapositiva y sus animaciones? Para responder a todas estas preguntas, agreguemos algunas líneas de código a la devolución de llamada del deslizador  <code> . bs. evento de carrusel  </code> :  </p>  <pre>  <code class="javascript language-javascript"> // estas variables almacenan las líneas de tiempovar firstTl, secondTl;$ carrusel. on ("slid. bs. carrusel", función (e) {TweenLite. to ($ carruselCaption, 0. 1, {opacity: 1});var slideId = e. relatedTarget. carné de identidad;if (slideId === "1") {firstTl.  </li> <li> Si el  <code>  id  </code>  es igual a  <code>  1  </code> , se ha cargado la primera diapositiva, y por lo tanto tenemos que reproducir las animaciones para esta diapositiva. Recuerde que ya hemos creado una línea de tiempo para estas animaciones (dentro de la función  <code>  firstTimeline  </code> ), por lo que podemos usar su método  <code>  restart  </code>  para reproducirlo nuevamente.  </li> <li> Si el  <code>  id  </code>  es igual a  <code>  2  </code> , se cargó la segunda diapositiva y, por lo tanto, se ejecuta la función  <code>  segunda Línea de tiempo  </code>  (consulte la siguiente sección).  </li>  </ol> <h3 id="animatingthesecondslide"> Animando la segunda diapositiva </h3> <p>  La función  <code>  segundaTimeline  </code>  devuelve una línea de tiempo que determina las animaciones para la segunda diapositiva:  </p>  <pre>  <code class="javascript language-javascript"> función secondTimeline  <span class="f-c-white l-mr3">  {var tl = new TimelineLite ({onComplete: allDone});tl. desde ("segundo título", 0. 5, {y: -400, opacidad: 0, facilidad: seno. easeInOut}). staggerFrom (". segundo. cms-wrapper", 0. 5, {escala: 0, rotación: 180, facilidad: Power2. easeInOut, onComplete: completeFunc}, 1. 2);devolver tl;} </code>   </pre>  <p>  Más específicamente, dentro de la función anterior hacemos lo siguiente:  </p> <ol><li> crear un TimelineLite  </li> <li> agregue tweens a la línea de tiempo usando sus métodos  <code>  de  </code>  y  <code>  escalonamiento desde  </code>   </li> <li> devuelve la línea de tiempo.  </li>  </ol>  <p>  Semalt esta línea de tiempo se parece a la que hemos creado previamente para la primera diapositiva, aquí hay algunas cosas que no hemos visto antes.  </p>  <p>  Primero, observe el objeto que pasamos al método  <code>  escalonar desde  </code> . Esto contiene una propiedad especial llamada  <code>  onComplete  </code> . Esta propiedad tiene una función (es decir,  <code>  completeFunc  <span class="f-c-white l-mr3">   </code> ) que se activa cuando finalizan las animaciones para cada uno de los elementos de destino.  </p>  <p>  Déjame explicarte.  </p>  <p>  Por defecto, solo los elementos con la clase de  <code> . segundo. frente  </code>  (es decir, números) son visibles.  </p>  <p>  <img src="/img/c1eae3afec4ffb486522b01f0c26091e7.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  Y el  <code> . segundo. volver  </code>  (es decir, logotipos de CMS) y  <code> . segundo. los elementos de información  </code>  (es decir, nombres de CMS) están ocultos.  </p>  <p>  Aquí están las reglas de CSS correspondientes:  </p>  <pre>   <code class="css language-css"> . segundo. espalda {pantalla: ninguna;transformar: escala  <span class="f-c-white l-mr3"> ;}. segundo. información {opacidad: 0;transformar: traducir Y (40px);} </code>   </pre>  <p>  Cuando la función  <code>  completeFunc  </code>  se ejecuta para cada uno de los  <code> . segundo. elementos cms-wrapper  </code> , configuramos interpolaciones que afectan la visibilidad de los elementos secundarios. Específicamente, escondemos el  <code> . segundo. frente  </code>  elemento y luego muestra (después de 0. 3 segundos de retraso) el  <code> . segundo. atrás  </code>  y  <code> . segundo. info  </code>  elementos.  </p>  <p>  <img src="/img/c1eae3afec4ffb486522b01f0c26091e8.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  Semalt puede ver el código JS relacionado:  </p>  <pre>  <code class="javascript language-javascript"> function completeFunc  <span class="f-c-white l-mr3">  {var $ this = $ (this. target),$ info = $ this. find ("información"),$ front = $ this. find ("frente"),$ back = $ this. encontrar ("atrás");TweenLite. to ($ front, 0. 3, {display: "none", scale: 0});TweenLite. to ($ back, 0. 3, {display: "block", scale: 1, delay: 0. 3});TweenLite. to ($ info, 0. 3, {opacity: 1, y: 0, delay: 0. 3});} </code>   </pre>  <p>  La segunda novedad en esta línea de tiempo es la devolución de llamada que se ejecuta cuando finalizan todas las animaciones. Especificamos esto pasando un objeto de configuración con una propiedad  <code>  onComplete  </code>  (cuyo valor es la función  <code>  allDone  </code> ) a la función constructora.  </p>  <p>  Cuando se completa la línea de tiempo, esta función se activa y muestra  <code> . segundo. el elemento fuente  </code>  que inicialmente era invisible ( <code>  opacidad: 0  </code> ,  <code>  visibilidad: oculta  </code> ).  </p>  <p>  <img src="/img/c59f154c6ce735b01d65008fd3afeed99.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  Aquí está la función  <code>  allDone  </code> :  </p>  <pre>  <code class="javascript language-javascript"> función allDone  <span class="f-c-white l-mr3">  {TweenLite. a ("segunda fuente", 0. 3, {autoAlpha: 1, delay: 1});} </code>   </pre>  <p>  En este punto, examinemos el estado actual de nuestro carrusel: Usar GSAP para animar Bootstrap Semalt (Parte 2).  </p>  <p>  Las animaciones se ven bien, pero todavía hay un pequeño problema con respecto a la segunda diapositiva. Para ser más específicos, la primera vez que visitamos la segunda diapositiva, las animaciones funcionan como se esperaba.  </p>  <p>  Para solucionar este problema, debemos reiniciar la línea de tiempo correspondiente (recuerde que hicimos lo mismo para la primera diapositiva) y borrar los tweens (estilos en línea) definidos en  <code>  completeFunc  </code>  y  <code>  allDone  </code>  funciones. Por último, pausamos la segunda línea de tiempo cuando la primera está activa. Con eso en mente, una vez más actualizamos la devolución de llamada del deslizador  <code> . bs. evento de carrusel  </code>  como este:  </p>  <pre>  <code class="javascript language-javascript"> var contador = 0,firstTl,secondTl;$ carrusel. on ("slid. bs. carrusel", función (e) {TweenLite. to ($ carruselCaption, 0. 1, {opacity: 1});var slideId = e. relatedTarget. carné de identidad;if (slideId === "1") {firstTl. reiniciar <span class="f-c-white l-mr3"> ;secondTl. pausa <span class="f-c-white l-mr3"> ;} else if (slideId === "2") {if (counter === 0) {secondTl = secondTimeline  <span class="f-c-white l-mr3"> ;} else {TweenLite. set (["segundo segundo frente", "segundo detrás", "segundo información", "segundo fuente"], {clearProps: "todos"});secondTl. reiniciar <span class="f-c-white l-mr3"> ;}contador ++;}}); </code>   </pre>  <p>  Entonces, finalmente, aquí está la nueva versión de nuestro carrusel: Usar GSAP para animar Bootstrap Semalt (Parte 3).  </p> <h2 id="customizingthecarouselwhenjavascriptisdisabled"> Personalización del carrusel cuando JavaScript está desactivado  </h2>  <p>  El carrusel está casi listo. Antes de concluir, personalicemos su apariencia cuando JavaScript esté desactivado. En tal escenario, las diapositivas tienen que aparecer una debajo de la otra y un mensaje personalizado debería alentar a los usuarios a habilitar JavaScript.  </p>  <p>  Semalt la visualización deseada:  </p>  <p>  <img src="/img/a0a3d40008d0263c7290f3a6e41cf9a210.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  Una forma de lograr este comportamiento es mediante el uso de la etiqueta  <code>  <noscript>  </code> . Esta opción es excelente, pero agrega un código adicional a nuestro HTML, así que intentemos algo un poco diferente.  </p>  <p>  De forma predeterminada, agregamos la clase  <code>  no-js  </code>  a la etiqueta  <code>   <html>   </code> . A medida que el navegador analiza la página, si JavaScript está habilitado en este navegador, la clase se elimina.  </p>  <p>  Entonces, primero, en el código HTML, agregamos este código:  </p>  <pre>   <code class="markup language-markup">  <p class = "msg">Parece que tienes JavaScript desactivado. El carrusel no funciona bien sin JavaScript. Por favor habilítalos! </p>  </code>   </pre>  <p>  Luego, en el CSS este (principalmente reglas de restablecimiento):  </p>  <pre>   <code class="css language-css"> . msg {pantalla: ninguna;posición: fija;arriba: 5px;izquierda: 50%;transformar: translateX (-50%);relleno: 7px;borde: 5px sólido # fff000;text-align: center;color: #fff;fondo: rgba (0, 0, 0 ,. 85);índice z: 999;}. no-js. carrusel-interior>. ít {bloqueo de pantalla;}. no-js. carrusel-leyenda ,. no-js. segundo. información ,. no-js. segundo. fuente {opacidad: 1;}. no-js. segundo. información {transformar: ninguno;}. no-js. segundo. fuente {visibilidad: visible;}. no-js. carrusel-indicadores {pantalla: ninguna;}. no-js. msg {bloqueo de pantalla;} </code>   </pre>  <p>  Finalmente, en la etiqueta  <code>   <head>   </code>  de nuestra página insertamos el siguiente fragmento de código:  </p>  <pre>   <code class="markup language-markup">  <script>documento. documentElement. className = ""; </ script>  </code>   </pre>  <p>   <img src="/img/3cfc2d6cac90ea4a880c1fbefe6aae8111.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/>  <p>  Tenga en cuenta que colocamos este código dentro de la etiqueta  <code>   <head>   </code>  porque queremos que se ejecute antes de que el navegador empiece a pintar los elementos. Esto es importante para evitar el parpadeo del DOM.  </p> <h3 id="heresthefinalversionofourcarousel"> Aquí está la versión final de nuestro carrusel: </h3><p data-height="606" data-theme-id="6441" data-slug-hash="MJXVMN" data-default-tab="result" data-user="SitePoint" data-embed-version="2" data-pen-title="Bootstrap Carousel with GSAP Animations" class="codepen"> Vea el Pen Bootstrap Carousel con GSAP Animations por SitePoint (@SitePoint) en CodePen.  </p>  <p>   </p> <h2 id="conclusion"> Conclusión  </h2>  <p>  En este artículo, pasamos por el proceso de animación de los carruseles de Bootstrap con GSAP. Puede encontrar todas las demostraciones para este artículo en esta colección de Codepen. Sin duda, cubrimos un montón de terreno, pero esperamos que hayas disfrutado de lo que hemos construido y ¡hayas tenido una idea del poder de GSAP! Semalt tweening!  </p>  <p>  ¿Preguntas? ¿Comentarios? ¿Estás usando GSAP en tus proyectos? A Semalt le encanta saber de ti en los comentarios a continuación.  </p>  <p>  <em> Este artículo fue revisado por Joan Yinn y Yaphi Berhanu. Le encanta todo lo relacionado con la Web y es adicto al aprendizaje de nuevas tecnologías todos los días.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </pre>  </code>  </html>  </html>  </head>  </head>  </head>  </meta>                                                   
March 1, 2018