Sugerencia rápida desplácese animaciones con fullPage.js y Animate.css

En un tutorial anterior, te presenté a fullPage.js, un popular complemento de jQuery para crear páginas de pantalla completa. En este consejo rápido, te mostraré cómo crear animaciones basadas en desplazamiento con fullPage.js y animate.css.

Bibliotecas Requeridas

Para los propósitos de este ejemplo, configuré una página de demostración. Si miras debajo de la Ajustes En la pestaña, verás que he incluido las siguientes bibliotecas en el bolígrafo:

• fullPage.js
• animate.css
• jQuery
• Oreja

El marco de Bootstrap no es vital; Lo agregué solo porque quería aprovechar sus estilos..

El proceso

Nuestra página consta de cuatro secciones; Cada uno llenando la página (gracias a fullPage). Los usuarios saltarán a la siguiente sección desplazándose o navegando a través de los enlaces de paginación a la derecha. Cada vez que suceda, activaremos algunas animaciones, como colocar las imágenes en posición, por ejemplo..

Antes de mostrar el código que activa las animaciones, veamos primero los pasos necesarios:

• Necesitamos aprovechar las funciones de "devolución de llamada" que proporciona fullPage. Más específicamente, en nuestro caso, queremos animar las secciones segunda, tercera y cuarta, así que usaremos De vacaciones llamar de vuelta. Si quisiéramos animar la primera sección, podríamos haber usado el después de la carga llamar de vuelta. De la misma manera, para animar las diapositivas deberíamos usar el afterSlideLoad y onSlideLeave funciones.
• Añadiremos dinámicamente las animaciones CSS proporcionadas por el animate.css biblioteca usando jQuery.
• También animaremos elementos de forma secuencial utilizando el animate-delay Propiedad CSS.

Ahora, vamos a sumergirnos en las animaciones.!

Animación # 1

La segunda sección de la página incluye tres imágenes y un botón. Aquí está su estructura:

 
             Un simple botón      
 

Tenga en cuenta que hemos añadido el es animado y is-animated__single Clases a los elementos que queremos animar. Además, tenga en cuenta que los elementos con los es animado clase compartirá el mismo efecto de animación (por ejemplo,. fadeInUpBig).

El código jQuery que activa las animaciones para esta sección tiene el siguiente aspecto:

 var $ isAnimatedSecond = $ ('. second.is-animated'), $ isAnimatedSecondSingle = $ ('. second .is-animated__single'); / * este código es parte de la devolución de llamada onLeave * / if (index == 1 && nextIndex == 2) $ isAnimatedSecond.addClass ('animated fadeInUpBig'); $ isAnimatedSecond.eq (0) .css ('animation-delay', '.3s'); $ isAnimatedSecond.eq (1) .css ('animation-delay', '.6s'); $ isAnimatedSecond.eq (2) .css ('animation-delay', '.9s'); $ isAnimatedSecondSingle.addClass ('animated rollIn'). css ('animation-delay', '1.7s');  

En este ejemplo, cuando dejamos la primera sección y pasamos a la segunda, aplicamos dos animaciones diferentes (es decir,. fadeInUpBig y llegar) a los elementos de destino. Además, utilizamos el animación-retraso Propiedad CSS para especificar cuándo deberían comenzar esas animaciones.

Animación # 2

La tercera sección contiene dos imágenes y un botón. A continuación puedes ver el código HTML correspondiente:

 
          Un simple botón      
 

Como en el ejemplo anterior, hemos añadido el es animado y is-animated__single Clases a los elementos deseados..

El código jQuery se parece a lo siguiente:

 var $ isAnimatedThird = $ ('. Third.is-animated'), $ isAnimatedThirdSingle = $ ('. Third .is-animated__single'); / * este código es parte de la devolución de llamada onLeave * / if ((index == 1 || index == 2) && nextIndex == 3) $ isAnimatedThird.eq (0) .addClass ('fatedInRightBig animado'). ('animación-retraso', '.3s'); $ isAnimatedThird.eq (1) .addClass ('fadeInLeftBig animado'). css ('animation-delay', '.6s'); $ isAnimatedThirdSingle.addClass ('animated bounceInDown'). css ('animation-delay', '1.2s');  

En esta sección, utilizamos el fadeInRightBig y fadeInLeftBig Animaciones para mostrar secuencialmente las imágenes. Además, mostramos el botón utilizando el rebotar en el interior animación.

Animación # 3

La cuarta sección consta de tres elementos: dos párrafos y un botón. Vea cómo está estructurado a continuación:

 
    
Algun texto aqui
   
Algun texto aqui
   Gracias!      
 

Una vez más, note que hemos dado a los elementos objetivo el es animado y is-animated__single clases.

A continuación, eche un vistazo al código jQuery asociado:

 var $ isAnimatedFourth = $ ('. four .is-animated'), $ isAnimatedFourthSingle = $ ('four .is. anim -__single'); / * este código es parte de la devolución de llamada onLeave * / if ((index == 1 || index == 2 || index == 3) && nextIndex == 4) $ isAnimatedFourth.addClass ('zoomIn animado'). css ('animación-retardo', '.6s'); $ isAnimatedFourthSingle.addClass ('animated lightSpeedIn'). css ('animación-delay', '1.2s') $ isAnimatedFourthSingle.one ('webkitAnimationElternation.png) ') .addClass (' zoomOutDown '););  

Aquí, ambos párrafos aparecen al mismo tiempo usando la acercarse animación. Por el contrario, el botón aparece utilizando el lightSpeedIn animación.

Además, el siguiente código nos ayuda a detectar cuándo finaliza una animación:

 $ ('# yourElement'). one ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); 

En nuestro ejemplo, mostramos el botón solo durante unos segundos y luego aprovechamos el código mencionado anteriormente para ocultarlo.

A continuación puede ver la demostración incrustada de Codepen (aunque la demostración de la página completa es mucho más efectiva):

Conclusión

En esta sugerencia rápida, aprendimos cómo podemos combinar las bibliotecas fullpage.js y animate.css para crear animaciones basadas en desplazamiento..

Si quieres mejorar esta demostración, aquí hay dos cosas que deberías probar:

• Habilita las animaciones solo en pantallas grandes. Para lograr esto, use el matchMedia método.
• Haga el código dentro de la De vacaciones Funciona mas reutilizable.