Haciendo animaciones como las de la web de Apple
⏳ 5 min

La mayoría de veces que he entrado a la web de Apple ha sido para ver sus páginas de productos, las cuales considero unas de las mejores de todo Internet. Las animaciones mientras vamos haciendo scroll en la página ya de por sí son un atractivo más que convence a la hora de comprar un producto. En este artículo no vamos a crear una página tan trabajada como las que hace Apple, pero sí veremos qué método utilizan en muchos de sus sitios para crear esos movimientos:
Para lograr esto necesitaremos dos librerías:
Podéis incluir los CDN para evitar descargarla utilizando las siguientes etiquetas de script que os dejamos GitHub o CodePen:
Aunque podéis ir siguiendo paso a paso todo lo que voy haciendo, podéis echar un vistazo al código final actualizado que podéis encontrar en el repositorio de GitHub:
Antes de empezar a picar código, me gustaría que vieseis cuál es el ejemplo que he tomado para crear el efecto. He seguido el ejemplo de Dev Ed, un youtuber de habla inglesa que ha intentado también imitar esta animación en un vídeo suyo.
Puede que penséis que es un simple vídeo lo que aparece en el GIF de arriba, pero no, es lo que ocurre cuando haces scroll en la página de los nuevos AirPods Pro. Es más, si haces scroll hacia arriba, la animación se reproduce a la inversa a la misma velocidad a la que te desplazas.
Aunque a decir verdad, sí, lo que hay detrás de todo esto es un vídeo, pero que cuenta con un efecto de scroll que hoy analizaremos e intentaremos imitar con el spot del nuevo MacBook Air. Yo he elegido este vídeo para seguir con la temática Apple y porque no es un anuncio demasiado largo, pero podéis escoger el video que queráis.
Una vez descargado el vídeo, lo guardamos dentro de una carpeta src dentro del directorio donde vayáis a hacer el proyecto. Bien, ya tenemos todo listo para comenzar a programar, veamos a ver como estructuramos nuestro proyecto:
Vamos a comenzar dando estilo a nuestra nueva página para luego dar paso a la animación, la cual haremos con JS. En el archivo HTML creamos la estructura básica y añadimos todas las dependencias de JS y CSS que vamos a necesitar (entre ellas el archivo app.js que luego usaremos para darle lógica al programa).
Aquí, vamos a crear dos apartados. El primero será un contenedor donde colocaremos nuestra animación, el título de la página y un texto que aparecerá cuando hagamos scroll. El segundo será un sección donde colocaremos un poco más de texto, y en mi caso, un botón para que podáis acceder directamente al código alojado en GitHub.
Si probáis el código anterior en una pestaña del navegador, veréis como queda todo sin ningún orden específico, así que vamos a retocar todo esto con CSS en nuestro archivo style.css.
Voy a analizar bloque a bloque lo que he escrito en dicho archivo:
Ahora ya podéis abrir el index.html y ver cómo ya todo está mejor posicionado para comenzar a implementar la lógica de la aplicación.
Bien, lo primero que vamos a hacer en nuestro archivo app.js es seleccionar y almacenar en una constante todos los elementos del documento que utilizaremos a lo largo de nuestro archivo.
Una vez hecho esto nos ponemos en serio con lo gordo de este proyecto, la librería ScrollMagic. Esta librería funciona con escenas que se van añadiendo a un controlador encargado de mostrarlas en el momento concreto. Así que eso haremos lo primero de todo, crear nuestro controlador:
const controller = new ScrollMagic.Controller();
Con el controlador ya definido, podemos comenzar con la animación principal de nuestro pequeño proyecto: la del vídeo. Para ello crearemos una escena con los siguientes parámetros:
Por último, aplicaremos los métodos setPin() y addTo() para añadir nuestra escena al controlador que hemos creado anteriormente.
Si probamos ahora nuestra página, veremos cómo aun hace lo que queremos. Para solucionar esto, añadiremos las siguientes lineas de JS:
La primera función actualiza los segundos por los cuales debería ir el vídeo conforma vamos haciendo scroll. La segunda, crea un delay teniendo en cuenta una aceleración para que la animación del video sea lo más fluida posible. Por último, a la función setInterval() le pasamos un parámetro que está relacionado con los FPS que tiene nuestro video. Lo correcto sería colocar el resultado de la división de [1000/fps], pero si en vuestro caso tenéis 30FPS, os recomiendo que coloquéis el valor 100. Podéis jugar con él hasta lograr el resultado deseado.
Lo siguiente que configuraremos es la animación del título. Comenzaremos por crearla:
Como veis, la estructura es bastante similar al anterior Sólo voy a destacar dos cosas. La primera es que gemos creado una animación para el elemento titulo para que cambia su opacidad del 100% hasta hacerse invisible. La segunda es la función setTween() de la escena que hemos creado, donde deberemos añadir la animación que hemos creado anteriormente.
De forma casi idéntica, hacemos la animación del texto donde hablamos del rendimiento:
En este caso colocaremos un offset de 3000 píxeles para que no se muestre hasta que no haya terminado la animación del título, que como hemos indicado anteriormente, tiene una duración de 3000.
Tras hacer todo esto, el código final del archivo app.js que se os quedará debería similar al que hay subido en GitHub o CodePen.
Ya podemos probarlo en nuestro navegador y comprobar el funcionamiento de esta animación. Si tenéis alguna duda podéis poneros en contacto conmigo o podéis revisar la versión final del código que encontrarás en el repositorio de GitHub. Por último, agradecer de nuevo a Dev Ed por la idea.