Firme en la línea de puntos termine su animación con puntos intermedios

En el tutorial anterior animamos una firma SVG utilizando CSS. Es un gran efecto, que parece que las palabras se escriben allí mismo en la pantalla. En este tutorial iremos más allá y usaremos Waypoints para activar la animación cuando elegimos.

El problema

Nuestra firma animada no es perfecta: el efecto de escritura comienza cuando la página se carga, incluso si el SVG está en la parte inferior de la página, fuera de la vista. Lo ideal es que la firma se anime cuando se desplaza por primera vez a la vista..

Para esto, necesitamos usar JavaScript y un poco de ayuda de la biblioteca de Waypoints. Los puntos de ruta detectarán cuando nuestra firma se desplace a la vista, momento en el cual agregaremos una clase a la elemento, y al hacerlo desencadenar la animación..

8. Añadir algún contenido de relleno

Para comenzar, agregue una carga de párrafos y un poco de texto para rellenar la parte superior de la página y sacar nuestra firma de la ventana gráfica. También agregaremos algunos estilos genéricos para hacer todo más fácil a la vista:

body padding-top: 20px; ancho: 90%; ancho máximo: 580px; margen: 0 auto; color: # 263238;  p font-size: 16px; línea de altura: 1.5; margen: 0 0 1.5em;  # firma: ancho: 40%; relleno: 2em 0; 

Puntos extra!

He utilizado una fuente de cableado brillante llamada BLOKK Neue; es una excelente adición estilística a nuestra demostración y enfoca nuestra firma. Si quieres, descarga la fuente y úsala..

p font-family: "BLOKKNeue-Regular", serif; tamaño de fuente: 16px; línea de altura: 1.5; margen: 0 0 1.5em; 

Para obtener más información sobre cómo utilizar las fuentes web, consulte Entendiendo la fuente de fuente de Jeremy Loyd.

9. Traer en Waypoints.js

Inusualmente para mí, no voy a apoyarme en jQuery. Waypoints 3.0 introdujo una versión completamente gratuita, así que seré atrevida y la usaré. Si prefieres la sintaxis de jQuery, o si ya tienes jQuery enganchado en tu proyecto por otras razones y simplemente te resulta más fácil de usar, ve con un archivo de Waypoints diferente y modifica el código que escribimos en consecuencia.

En cualquier caso, tome el archivo, haga un enlace a él desde su documento HTML (o dentro de su panel de CodePen JS) y siéntese con una taza de café durante cinco minutos..

Apunta al SVG

Necesitamos decirle a Waypoints sobre nuestra , así que vamos a agarrarlo y asignarlo a la variable mi firma:

var mySignature = document.getElementById ('signature');

Ahora creamos una instancia de la clase Waypoint, así que agregue el siguiente fragmento de código al panel JS en CodePen (o dentro de > etiquetas en la parte inferior de su documento HTML si está haciendo las cosas de esa manera).

Tenemos que asegurarnos de pasar nuestro mi firma al elemento opción (para que sepa de qué elemento se está cuidando) y asegurarse de que entrenador de animales Se define la opción. El controlador es donde dictamos lo que sucede cuando se activa el punto de referencia..

var mySignature = document.getElementById ('signature'); var waypoint = new Waypoint (element: mySignature, handler: function (direction) )

Parte inferior de la ventana

El código anterior activará "algo" cuando la parte superior de nuestro El elemento golpea la parte superior de la ventana. Necesitamos el punto de ruta para disparar cuando la parte inferior de la llega a la parte inferior de la ventana, en otras palabras, cuando se desplaza completamente a la vista. Para esto podemos utilizar las compensaciones de waypoints. Las compensaciones nos permiten especificar exactamente cuándo queremos que un elemento active una acción, en nuestro caso queremos usar: desplazamiento: 'bottom-in-view' Me gusta esto:

var mySignature = document.getElementById ('signature'); var waypoint = new Waypoint (element: mySignature, handler: function (direction) , offset: 'bottom-in-view')

Entrenador de animales

Por último, debemos especificar qué sucederá cuando se active el punto de ruta. Queremos una clase (animar) para ser añadido a nuestro y esa clase será a la que adjuntaremos nuestras animaciones. Por lo tanto, las animaciones solo comenzarán a reproducirse una vez que se agregue la clase. Nosotros agregaremos mySignature.classList.add ('animar') a la función de controlador, que nos proporciona un script completo que se ve así:

var mySignature = document.getElementById ('signature'); var waypoint = new Waypoint (element: mySignature, handler: function (direction) mySignature.classList.add ('animate'), offset: 'bottom-in-view')

10. Utilizando .animar en nuestro CSS

¿Recuerdas todas aquellas reglas donde definimos las animaciones? Vamos a ser un poco más específicos. En vez de tener:

.stroke-I stroke-dasharray: 80; Animación: write1 2s 1 eas-out; 

vamos a hacer que cada uno se aplique sólo cuando el animar clase ha sido agregada al padre :

.animar .stroke-I stroke-dasharray: 80; Animación: write1 2s 1 eas-out; 

El resultado debe estar bastante cerca, intente desplazarse hacia abajo:

# firma # ancho: 40%; relleno: 2em 0; opacidad: 0;  # signature.animada opacidad: 1;