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

Firma en la línea de puntos: Terminar tu animación con Waypoints

by
Difficulty:IntermediateLength:ShortLanguages:

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

En el tutorial anterior animamos una firma SVG usando CSS. Es un gran efecto, haciendo que parezca como si las palabras se estuvieran escribiendo allí mismo directamente en la pantalla. En este tutorial vamos a llevar las cosas más allá y usaremos Waypoints para activar la animación cuando queramos.

El problema

Nuestra firma animada no es perfecta: el efecto de escritura comienza en cuanto se carga la página, incluso aunque el SVG está en la parte inferior de la página, fuera de la vista. Idealmente nos gustaría que la firma se animase cada vez que se desplaza por primera vez quedando a la vista.

Para ello, necesitamos usar JavaScript y un poco de ayuda de la biblioteca Waypoints. Waypoints detectará cuándo el desplazamiento de página deje nuestra firma a la vista, momento en el que agregaremos una clase a elemento <svg> y, al hacerlo, desencadenaremos la animación.

8. Añadir algo de contenido de relleno

Para empezar, agrega un montón de párrafos y algo de texto para rellenar la parte superior de la página y empujar nuestra firma fuera de la ventana de visualización. También añadiremos algunos estilos genéricos para que todo quede un poco más comprensible a la vista:

¡Puntos extra!

He utilizado una brillante fuente para abocetar llamada BLOKK Neue, es una gran adición estilística para nuestra demostración y ayuda a que el foco se centre en nuestra firma. Si quieres, descarga la fuente y utilízala tú mismo.

Para obtener más información sobre cómo utilizar fuentes web, echa un vistazo a Descifrando @font-face de Jeremy Loyd.

9. Incorporar Waypoints.js

Aunque no es usual en mí, esta vez no voy a apoyarme en jQuery. Waypoints 3.0 introdujo una completa versión del marco libre, así que voy a ser atrevido y la usaré. Si prefieres la sintaxis de jQuery, o ya tienes jQuery incluido en tu proyecto por cualquier otro motivo y sencillamente te resulta más fácil de usar, por todos los medios continúa con un archivo Waypoints diferente y altera el código que hemos escrito como corresponda.

En cualquier caso, coge el archivo, enlaza a él desde tu documento HTML (o dentro de tu panel JS de CodePen) y siéntate con una taza de café durante cinco minutos.

Apuntar al SVG

Tenemos que informar a Waypoints sobre nuestro <svg>, así que vamos a cogerlo y asignarle la variable mySignature:

Ahora creamos una instancia de la clase Waypoint, así que agrega el siguiente fragmento de código al panel JS en CodePen (o dentro de las etiquetas <script> al final de tu documento HTML si lo estás haciendo de esta forma).

Tenemos que asegurarnos de pasar nuestro mySignature a la opción element (para que sepa qué elemento tiene que vigilar) y asegurarnos de que la opción handler esté definida. El controlador es donde dictamos qué sucede cuando se desencadena el punto de referencia.

Parte inferior de la ventana

El código anterior activará "algo" cuando la parte superior de nuestro elemento <svg> alcance la parte superior de la ventana. Necesitamos que el punto de referencia se active cuando la parte inferior del <svg> toque la parte inferior de la ventana, es decir, cuando esté desplazado de manera que queda totalmente a la vista. Para conseguirlo podemos usar los Offsets (desplazamientos) de Waypoints. Los offsets nos permiten especificar exactamente cuándo queremos que un elemento active una acción, en nuestro caso queremos usar: offset: 'bottom-in-view' de la siguiente manera:

Controlador

Por último, tenemos que especificar lo que va a pasar cuando se active el punto de referencia. Queremos que se agregue una clase (animate) a nuestro <svg> y esa clase será a la que adjuntamos nuestras animaciones. Por lo tanto, las animaciones solo comenzarán a reproducirse una vez que la clase haya sido añadida. Añadiremos mySignature.classList.add('animate') a la función del controlador, lo que nos proporcionará un script completo con el siguiente aspecto:

10. Usar .animate en nuestro CSS

¿Recuerdas todas esas reglas en las que definimos las animaciones? Vamos a ser un poco más específicos. En lugar de tener:

vamos a hacer que cada uno se aplique sólo cuando la clase animate se haya agregado al elemento <svg> primario:

El resultado debería estar bastante cerca, intente desplazarte hacia abajo:

11. Opacidad

El último detalle que nos queda solucionar es que la firma es totalmente visible por defecto, por tanto, cuando queda a la vista tras el desplazamiento se da un flash cuando desaparece antes de ser "dibujado". Podemos evitar esto haciendo que el <svg> sea transparente al inicio, para luego revelarlo cuando la clase animate sea añadida.

Lo haremos usando opacity: 0; en su estado predeterminado, y luego añadiremos opacity: 1; cuando esté listo para ir:

Conclusión

¡Este ha sido un excelente pequeño proyecto para practicar una serie de habilidades! Usamos un SVG en línea en una página web, lo limpiamos eliminando sus atributos y convirtiéndolos en propiedades CSS, hemos visto cómo controlar bien una animación CSS y finalmente hicimos que el resultado final se ejecutase de una manera funcional con algo de ayuda de JavaScript.

Es un resultado final divertido, pero ¿qué más podrías hacer con él? Para empezar, el CSS podría limpiarse mucho más mediante el uso de un preprocesador, echa un vistazo a cómo ordenarlo. También puedes utilizar esta técnica en logotipos, testimonios o en una llamada a la acción. ¡Pruébalo tú mismo y publica tus resultados en la sección de comentarios!

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.