Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery
Webdesign

Truco rápido: animaciones al desplazarse con fullPage.js y Animate.css

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En un tutorial previo, te presenté a fullPage.js, un popular plugin de jQuery para crear páginas a pantalla completa. En este consejo rápido, te mostraré cómo crear animaciones al desplazarse por la página con fullPage.js y animate.css.

Bibliotecas requeridas

Para los propósitos de este ejemplo, configuré una página de demostración. Si miras bajo la pestaña configuraciónes (Settings), verás que incluí las siguientes bibliotecas en el "pen":

file

El framework de Bootstrap no es vital; lo añadí solo porque quería aprovechar sus estilos.

El proceso

Nuestra página consta de cuatro secciones; cada una 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 esto ocurre, activamos algunas animaciones, como, por ejemplo, colocar las imágenes en posición.

file

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

  • Necesitamos aprovechar las funciones de "callback" que proporciona fullPage. En nuestro caso, queremos animar la segunda, tercera y cuarta sección, por lo que usaremos la devolución de llamada onLeave. Si quisiéramos animar la primera sección, podríamos haber utilizado la devolución de llamada afterLoad. De la misma forma, para animar las diapositivas deberíamos utilizar las funciones afterSlideLoad y onSlideLeave.
  • Agregaremos dinámicamente las animaciones de CSS proporcionadas por la biblioteca animate.css utilizando jQuery.
  • Además animaremos elementos de forma secuencial usando la propiedad CSS de animate-delay.

Ahora, ¡vayamos a 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:

Ten en cuenta que hemos añadido las clases is-animated junto con is-animated__single a los elementos que queremos animar. Asimismo, ten en cuenta que los elementos con la clase is-animated compartirán el mismo efecto de animación (por ejemplo, fadeInUpBig).

El código jQuery que activa las animaciones para esta sección se ve así:

En este ejemplo, cuando dejamos la primera sección y pasamos a la segunda, aplicamos dos animaciones diferentes (es decir, fadeInUpBig y rollIn) a los elementos de destino. Además, utilizamos la propiedad animation-delay de CSS para especificar cuándo deben 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:

Al igual que en el ejemplo anterior, hemos añadido las clases is-animated  además de is-animated__single a los elementos deseados.

El código jQuery tiene el siguente aspecto:

En esta sección, usamos las animaciones fadeInRightBig y fadeInLeftBig para mostrar secuencialmente las imágenes. Asimismo, mostramos el botón utilizando la animación bounceInDown.

Animación #3

La cuarta sección consta de tres elementos: dos párrafos y un botón. Mira cómo está estructurada:

Una vez más, observa que hemos dado a los elementos de destino las clases is-animated e is-animated__single.

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

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

Por otra parte, el siguiente código nos ayuda a detectar cuándo termina una animación:

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

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

Conclusión

En este consejo rápido, aprendimos cómo podemos combinar las bibliotecas fullpage.js y animate.css para crear animaciones al desplazarse por la página.

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

  • Habilitar las animaciones solo en pantallas grandes. Para lograr esto, utiliza el método matchMedia.
  • Haz que el código dentro de la función onLeave sea más reutilizable.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.