Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Cómo Animar una Cinta SVG de Día Mundial de la Salud Mental

by
Difficulty:IntermediateLength:LongLanguages:

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

El de la Organización Mundial de la salud "Mental Salud día mundial" está aquí, 10 de octubre de 2018, para ayudar a crear conciencia sobre temas de salud mental. Este año el enfoque es animándonos a apoyar y participar con programas y servicios que pueden llegar a los jóvenes, idealmente con eficacia tratar problemas tan pronto como sea posible.

Para conmemorar el día que vamos a utilizar CSS para animar un SVG centrado de la cinta verde, mucha gente usa para simbolizar la conciencia de la salud mental.

Tenemos dos manos juntos procedentes de los lados izquierdo y derecho de la etapa de cierre juntos, ilustrando la gente de apoyo puede proporcionar uno al otro, después de que la cinta verde aparecerá junto con un texto descriptivo.

Cuando termines, tendrás esta animación (presiona RERUN si es necesario):

1. Obtener el Código de Arranque

He preparado el código SVG y HTML para usted con antelación para que pueda concentrarse sólo en el uso de CSS para animar diversos elementos que componen la ilustración.

Para comenzar, cree un archivo vacío con HTML, luego copiar y pegar en el código que ves a continuación:

Guardar y previsualizar que el archivo en un navegador y usted debería ver esta imagen, con elementos de SVG visibles, algunos apilados encima de otros:

World Mental Health Day 2018 first image

Vamos a empezar con un desglose de cada elemento incluido en el SVG para que sepa lo que estamos trabajando con.

Primero para arriba tenemos la mano delantera que entrará desde el lado izquierdo de la SVG:

World Mental Health Day 2018 the hand

Entonces tenemos la mano posterior que entra por la derecha:

World Mental Health Day 2018 right hand

Después de las dos manos abiertas han cruzado encima en el centro de la pantalla, los reemplazaremos con las manos juntas:

World Mental Health Day 2018 clasped hands

Luego tenemos la cinta de conciencia verde salud mental que se desvanecerá en:

World Mental Health Day 2018 green ribbon

El texto principal del "Día Mundial de la Salud Mental" que se desvanecerá después de eso:

World Mental Health Day 2018 text label

Y el texto de la fecha, que será el elemento final a desvanecerse:

World Mental Health Day 2018 subtitle

2. Comenzar a Añadir CSS

Todo lo que necesitamos para nuestra animación ya está en el código SVG, sólo tenemos que llegar y apuntar los elementos que contiene mediante su identificador.

Lo primero que debemos hacer es ocultar todos los elementos para que más adelante podemos demostrar cada uno en el momento adecuado. Agregue el código siguiente entre las <style></style> etiquetas ya presentes en el código HTML archivo que acaba de crear.

3. Asegúrese de Entrar en la Mano Frente de la Izquierda

Usaremos @keyframes animaciones para cada parte de nuestra secuencia. La primera animación que vamos a crear es el que puede mover un elemento desde una posición fuera del borde izquierdo de la SVG a su posición original en el centro.

Agregue el código siguiente a tu CSS.

Vamos a paso a través de lo que estamos haciendo con este código.

Sólo tenemos que mover nuestro elemento de una posición a otra, en lugar de tener que zig-zag a través de posiciones provisionales. Por eso que sólo podremos usar from y to en lugar de necesitar para especificar porcentaje basado en fotogramas clave.

En el fotograma from que utilizaremos la propiedad transform de translate, es decir, cambiar la posición, el elemento a la izquierda, una posición que se expresa como -100%. En el a fotograma to indicamos la posición inicial del elemento 0%. La animación de fotograma clave automáticamente encargará de mover el elemento entre el estado from y to.

Usted notará también que la opacidad se establece en 1 en ambos fotogramas clave. Esto significa que el elemento se aparecen al principio de la animación, permanezca visible hasta el final, después volver a la opacidad por defecto de 0 salimos antes y desaparecer una vez más. Es necesario que esto sucediera dar paso al elemento de manos agarradas que aparecerá luego.

Ahora podemos aplicar la animación al elemento frente a la mano de nuestro SVG, que utiliza el ID #fronthand. Añadir el siguiente CSS en tu código.

Aquí estamos especificando el nombre de la animación, es decir, infromleft, que se activará la animación que acabamos de crear. En la segunda línea estamos contando la animación para ejecutar durante un período de 1,5 segundos. Y en la tercera línea le estamos diciendo que utilice la función de temporización ease-out animación, que hará que el movimiento de inicio rápido luego reducir la velocidad hacia el final.

Cuando usted guarde y actualice su página ahora debería ver la mano delantera vienen en el lado y parada en el centro, como en la foto, por un breve momento antes de desaparecer:

World Mental Health Day 2018 hand

4. Asegúrese de Entrar en la Parte Posterior de la Mano de la Derecha

Ahora crearemos otra animación casi idéntica a la primera, con la diferencia que el elemento se mueve en la derecha en vez de la izquierda. Añadir este CSS a tu estilo:

Verás que en la de fotograma clave from, que traducimos por 100% en lugar de -100%, lo que empuja a la animación de punto de partida hacia fuera más allá del borde derecho. Todo lo demás en este código es igual a la última animación.

Que aplicaremos esta animación al elemento posterior de la mano en el SVG agregando este código:

Ahora debería ver las dos manos que se unen hasta que cruzan en el centro antes de desaparecer otra vez.

World Mental Health Day 2018 hands crossing over

5. Hacer las Manos Aplaudan

Ya tenemos las dos manos abiertas desaparecen una vez que han terminado de mover. A continuación, tenemos que el elemento de manos agarradas aparecen instantáneamente en el momento exacto que desaparecen de las manos abiertas.

Para hacer esto sucede vamos a crear otra animación de fotograma clave llamado instantappear. Todo esta animación va a hacer es establecer la opacidad a 1 a lo largo de la animación. Añadir este CSS en el archivo:

Aplique la animación al elemento #claspedhands con este código:

Aquí, en las dos primeras líneas pedimos nuestra animación de instantappear y establece su duración en 1 segundo.

En la tercera línea que le estamos diciendo la animación al retardo de 1,5 segundos, que corresponde con la duración de nuestras dos primeras animaciones. De esta manera tan pronto como haya terminado, esto comenzará la animación.

Luego, en la cuarta línea, estamos configurando la propiedad de animation-fill-mode a forwards. Lo que esto hace es decirle a la animación que se detenga en su último fotograma y permanezca allí. Esto evitará que el elemento en la opacidad del 1 en el fotograma clave final, en lugar de volver a los valores de opacidad de 0 como delantero y traseras manos hicieron.

Previsualice la animación y cuando haya terminado debe ver esto:

World Mental Health Day 2018 clasped hands

6. Aparecer los Elementos Restantes con Fotogramas Clave Reutilizables

Sólo necesitamos una animación más de los tres elementos restantes, que se desvanecerá en algo que se aplica. Podemos usarlo en cada elemento con diferentes ajustes para completar la secuencia.

Crear una nueva animación llamada fadein y establézcalo en transición de opacidad 0 a opacidad 1 así:

La cinta verde es el siguiente elemento que queremos aparecer, así que aplicar nuestra nueva animación fadein a él con el siguiente CSS:

Aquí estamos teniendo el fade en efecto pasado tres cuartos de segundo, y hemos establecido para empezar a 1,75 segundos, después de las animaciones anteriores. Otra vez usamos a animation-fill-mode: forwards; para asegurar la opacidad del elemento se mantiene en 1 en lugar de impago a 0.

Cuando se completa la secuencia ahora veremos esto:

World Mental Health Day 2018 final animation

Ahora vamos a hacer el texto principal aparezca así. Tenemos ya un estilo de #wmhd en el documento, así que actualización a la siguiente:

Estamos utilizando el mismo código como lo hicimos en el elemento #ribbon, solo sacas el retraso a 2,25 segundos para que alterne la aparición de los elementos.

La animación debe terminar ahora en este estado:

World Mental Health Day 2018 finish state

Por último, tenemos que la fecha aparezca, así actualizar el estilo de #date existente para:

Una vez más, el único cambio está empujando a la hora de inicio de la animación.

Terminando

Con ese último trozo de código, la animación está completa y cuando termine el rodaje debe tener este aspecto:

World Mental Health Day 2018 complete clasping hands animation

Para más información sobre el Día Mundial de la Salud Mental, visite el sitio web de WHO.

Aprender todo sobre animación de CSS:

Encuentra Más Sobre Animación SVG:


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.