Animacion de texto

Animacion de texto : Hola a todos hoy vamos a generar una animación de texto que la podremos colarcar en cualquier pagina de código html como en WordPress

En esta ocasión vamos a reutilizar una animación que ya tenía como era la tiera haciendo zoom que la tenéis en l primer tutorial de animación de imágenes

Si mas lio vamos a nuestra página web https://animacionesweb.online , donde vemos nuestro escenario que ya tiene colocado previamente unas  dimensiones de 500×500 en la configuración de medidas sugiero la visualización del video de cómo animar imágenes en 2 minutos realizado previamente

Vamos a colocar un parrafo css dentro de nuestro escenario junto  a la animación

Vamos a añadirà Texto css esto nos llevara a una nueva página donde podremos

  • Insertar un texto
  • Elegir un tipo de fuente para dicho texto
  • Modificar el grosor del las letras y seleccionar si queremos cursiva o no

Cuando tengamos todo los parámetros a nuestro gusto le damos a botón animar texto, con esto nos llevara nuestra frase a nuestro escenario svg

Con la estrella de movimiento y seccionado el texto la moveremos a donde deseemos que empiece la animación web

Es hora de darle un poco de color a nuestro texto, el próximo video será como darle degradado , ahora nos conformaremos con crear colores planos

Vamos al botón colorear àda color a tus animaciones

Elegiremos el color deseado y daremos clic al texto. Veremos cómo el texto cambia al color deseado

Vamos a darle contorno al texto de la misma forma vamos a colorearàcrea contorno a tu svg

Elegiremos un color de contorno, como veis se puede elegir diferentes grosores y líneas discontinuas, lo interesante es ir jugando para ir aprendiendo cual es la mejor opción  para nuestro diseños web

Le daremos clic a le texto y se nos pondrá las leras con el contorno deseado

Con el contorno elegido daremos clic a nuestro texto y veremos como ya queda con el color plano elegido previamente y nuestro contorno personalizado.

Bien es el momento de hacerle animación a nuestro texto

Vamos al panel de animación web clicando sobre el botón crea animaciones css, donde se abrirá un montón de posibilidades y de parámetros para realizar nuestra animación online

Primero vamos a crear un poco de escala al texto marcando el tanto porcentual de inicio y movemos nuestras letras si hace falta, y le damos a grabar posición actual

Repetimos la operación marcando el final de la animación en la posición donde deseamos que nuestro texto se muestre en el 100% de la animación ósea a final

Ya tenemos nuestra animación realizada pero vamos a complicar un poco el tema

Vamos a aplicar una animación de transparencia al texto muy fácilmente

Con el texto seleccionado y dentro de la pantalla de animaciones vamos grabando el estado de transparencia en el tanto por ciento de la animación que deseamos que se modifique, en nuestro caso partimos de ninguna trasparencia al inicio de la animación y un a trasparencia total al final de la animación, siempre dándole al botón grabar estado de transparencia en cada parte porcentual

Y asolo nos queda descargar la animación desde archivoàdescarga animación gratis css

Allí se podrá copiar el código que podrás pegar como html personalizado en tu pagina WordPress o descargarla en formato svg para poderla modificar en otras partes al ser un dibujo vectorial totalmente normalizado.

Animaciones realizadas por https://animacionesweb.online blog de animaciones web https://animacionesweb.com MI TIERRA
<svg class="img-responsive" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 500 500 "><defs>
			
			
			<desc> Animaciones realizadas por https://animacionesweb.online </desc>
			                blog de animaciones web https://animacionesweb.com
			
 <style id="css" type="text/css"> .a859{
						animation-duration:5s;
						animation-delay:0s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a859;
                transition-timing-function:linear;
				animation-fill-mode:none;
 				transform-style:preserve-3d;
					}
						
				@keyframes a859  
						{
						0.1% {
		 
		transform: matrix3d(0.348678,0,0,0,0,0.348678,0,0,0,0,0.348678,0,162.83,162.83,1628.3,1);
		 
		  
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(0.994821,0,0,0,0,0.994821,0,0,0,0,0.994821,0,1.29453,1.29453,4645.72,1);
		 
		  
	 }}.a865{
						animation-duration:5s;
						animation-delay:0s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a865;
                transition-timing-function:linear;
				animation-fill-mode:none;
 				transform-style:preserve-3d;
					}
						
				@keyframes a865  
						{
						0.1% {
		 
		transform: matrix3d(0.9,0,0,0,0,0.9,0,0,0,0,0.9,0,79,227,250,1);
		 opacity:0.99;
		  
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(1.089,0,0,0,0,1.089,0,0,0,0,1.089,0,42.9577,223.023,302.5,1);
		 opacity:0;
		  
	 }}</style> </defs><g id="todo" style="transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,1)">




			<g id="b863"> <image id="r91luna1603902807" style="transform: matrix3d(0.59049,0,0,0,0,0.59049,0,0,0,0,0.59049,0,-2,-2,888,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r91luna.png" class="a863" width="500" height="505" x="0" y="0" stroke-width="" stroke="none"></image></g>




			<g id="b859"> <image id="r196tierra1603878113" style="transform:matrix3d(0.348678,0,0,0,0,0.348678,0,0,0,0,0.348678,0,162.83048002,162.83048002,1628.3048002,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r196tierra.png" class="a859" width="500" height="500" x="0" y="0" stroke-width="" stroke="none"></image></g>




			<g id="b865">   <g id="2MI1603904525" class="a865" style="transform: matrix3d(0.9,0,0,0,0,0.9,0,0,0,0,0.9,0,79,227,250,1)"> 
							 
			

					 
					<text x="20" y="38" font-family="Elephant" font-size="50" font-style="normal" font-weight="bold" stroke-width="" stroke="#0101DF" fill="rgb(251, 239, 242)" stroke-dasharray="">
					MI TIERRA 

					</text>   

		</g>   
		</g> 



</g>                     
				  
               
               	 

  
 	 
	  



                </svg>		

Deja un comentario