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>		

Animación de imagenes

Animación de imagenes:Hola a todos . hoy  vamos hacer una animación de de una fotografía en menos de 3 minutos

Este es un tutorial de animaciones de muchos, que vamos a realizar con ejemplos para colocar animaciones en una web, lo vamos a orientar  a cualquier pagina de código abierto pero lo probaremos en el CMS WordPress, para ver los problemas que aparecen

,Empezamos

–Lo primero que haremos será abrir nuestro pagina web https://animacionesweb.online en el explorado firefox, seguramente en las demás exploradores también funcionan pero hay pequeñas diferencias a la hora de tratar el código

En la página principal de nuestra web , podremos ver un gran escenario de un grafico svg , si quieres saber mas  que es svg y para que sirve pues a mi pagina principal de animaciones web comentarios

Lo primero que configuraremos es el espacio.

Realmente solo vamos a ajustar la proporción del escenario ya que si habéis visto mi blog los gráficos svg se pueden hacer  adaptables al “cajón” donde insertemos el código

–Así pues vamos a configuración svg y abrimos parámetros svg

–configuramos nuestro espacio de escenario a 500 x500 para conseguir un svg cuadrado

Como  veis nuestro escenario se ha adaptado proporcionalmente a un grafico de esas dimensiones,

 Para —–los alumnos aventajados podemos ir mirando el código que se va generando apretando botón derecho “inspeccionar elemento”

———————————————————-

Ahora toca insertar una imagen.  Para eso tenemos que subirla a nuestro escenario.

Vamos a Añade-à imágenes aquí os lleva a una página realmente poco currada, prometo arreglarla,  apretamos a examinar–à buscamos en nuestro disco dura que imagen deseamos animarà traemos la imagenà y regresamos a nuestra página de inicio,

Si todo ha ido bien y no ha habido problemas de nombres repetidos, o imágenes  no permitidas etc… podremos ver nuestra imagen  en nuestro escenario

Si es necesario la puedes centrar o escalarla con la estrella de movimiento ,

Vamos a animarla en esta imagen la veo apropiada utilizar la escala pero lógicamente se puede hacer cualquier tipo de trasformación, de desplazamiento, de giro de sesgo y combinaciones etc , de la misma forma que ahora te voy a indicar

Colocamos la imagen como deseamos que empiece la animación

Vamos a crear animaciones css

Allii veremos un regla de transformaciones porcentual le decimos al inicio graba posición actual con esto  hemos marcado el primer keyframe de nuestra animación

Como vamos hacerla sencilla vamos solo vamos a crear el punto final, Hacemos zoom a la imagen con nuestra estrella a la posición que deseemos que termine la animación y marcamos  final  -àgrabar posición actual

 Ya solo queda probar la animación dándole poner en marcha

Podemos modificar el tiempo de la animación que por defecto son 20 segundos

Ya solo nos queda descargar la animación gratis y sin registro alguno ( si quieres modificar esta animación otro día si que tendrás que estar dado de alta en nuestra web.)

Archivo -àdescargar la animación con un clic nos aparecerá otro clic y con otro nos debería descargar la imagen en formato zip( mentira que tengo problemas con los callback de javascript) 😉

Ya la tenemos descargada y podemos ver si funciona arrastra el grafico svg a una pantalla nueva del explorador, la imagen se adaptara ala pantalla de tu ordenador

Vamos a insertarla a nuestra blog.

Ya tenemos descargado el archivo svg, si lo abrimos con cualquier editor de código o con un simple notepad podremos ver el código que se ha generado online, solo nos quedara copiar y pegar en nuestro WordPress como html personalizado, desconozco la causa por qué no me ha permitido agregarlo como una imagen simple,

Un saludo

Animaciones realizadas por https://animacionesweb.online blog de animaciones web https://animacionesweb.com
<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);
		 
		  
	 }}</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="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>                     
				  
               
               	 

  
 	 
	  



                </svg>		

Crear logo online gratis

Que es un logotipo

Crear logo online gratis : Los logotipos de empresas es el Símbolo o gráfico formado por imágenes ,letras o dibujos preferiblemente vectoriales que sirve para cuando es visto el logotipo de empresa o logotipos de marcas rápidamente sea identificada con ella

En el diseño de paginas web grafico podríamos decir que un logotipo es la imagen corporativa e identidad visual de una marca. Un logotipo se define como la representación gráfica de las letras o tipografías que componen el nombre principal de la marca.

Tipo de logos

Hay cuatro tipo de logotipos de empresas o logos de marcas según sus componentes

Logotipo, isotipo, imagotipo e isologo y podras Crear logo online gratis desde nuestra pagina web https://animacionesweb.online

logotipo online gratis :

Un logotipo se define como la representación gráfica de letras o tipografías que componen el nombre principal de la marca

Por ello, un logotipo tan solo serán compuesto por las palabras o textos o algún elemento legible.( se puede leer el logo).

Desde animaciones web online te diremos como crear logotipo online gratis de cualquier tipo y ademas vectorial facilmente y sin registros, a que mola….

Logotipo vectorial gratis
Logotipo vectorial gratis

.

Isotipo: (dibujo o símbolo)

Un logo isotipo es el dibujo o representación gráfica que representa una marca, es decir, es la figura o imagen por la que se una marca o empresa se ve representada y para que los usuarios la recuerden e identifiquen. El logotipo isotipo solo está compuesto por el dibujo, sin nada de texto, por lo que si lo ves, deberías recordar de qué marca se trata.

https://animacionesweb.online

crear logo online gratis

Imagotipo:

El logotipo imagotipo (símbolo + palabras desagrupadas) es el logo que mezcla entre sus diseño una representación grafica y además un texto que identifica la marca

Logotipo en animacionesweb.online
Logotipo en animacionesweb.online

Isologo :

Al igual que en el logo imagotipo, en el logo isologo tenemos el nombre en texto y el símbolo, solo que en este tipo de logo forman un elemento que no se puede dividir entre el texto y el grafico.

Por lo tanto, un logotipo isologo se define como la o unión de un isotipo y logotipo en un mismo elemento.

Crea tu logo online y gratis
Crea tulogo online y gratis

Como hacer un logo

Actualmente es muy interesante que a la hora de buscar crear logo online gratis,los logotipos sean creados con imágenes vectoriales y así poderlos escalar sin perder calidad de imagen, el formato vectorial svg en un ejemplo perfecto para ello.

Nuestra empresa pone a su disposición nuestro software de crear logotipo gratis online que trabaja con css de html5 y con el formato svg, un formato vectorial de representación gráfica.

Vamos a explicar cómo realizar unos logotipos originales y vectoriales totalmente gratis desde nuestra pagina web https://animacionesweb.online ,donde podremos usar gráficos vectoriales y logotipos con letras y crear todos los tipos de logos que hemos explicado anteriormente.y hasta después los podemos animar para nuestra web

MODO DE CREAR LOGOTIPO ONLINE GRATIS

Crear un logo online gratis Entramos en nuestra aplicación web https://animacionesweb.online, si deseamos hacer un logo en varios días, deberíamos darnos de alta para que guardásemos tu nombre, si no es así podrás crear logotipo online gratis y sin registrarse al menos por ahora 😉
Selecionar Graficos y texto svg

En el menú encima de nuestra zona de trabajo podremos seccionar los elementos gráficos a añadir ya sea gráficos o texto, todo esto en formato vectorial y trabajado con css para html5

Elige cuantos dibujos vectoriales desees para crear logo online gratis, y crea tu texto con tus fuentes favoritas de texto. Todo ello se irá poniendo por capas en nuestro creador online de logotipos e animaciones css online

añade elementos  aun logotipo
añade elementos aun logotipo
Mueve los gráficos svg

Podrás mover los objetos del logo seleccionando el nombre y utilizando la estrella de movimiento.

podrás decidir que capa del logotipo se pone encima del otro con las flechas y

podrás seccionar parte de ese gráfico con el menú de la derecha dándole click al objeto que queremos seleccionar ,por defecto se moverá el padre del svg( todo el elemento)

Mover los elemento se un logotipo
Mover los elemento se un logotipo
Elimina las parte del logotipo que no desees de tu logotipo

Elimina partes de los dibujos vectoriales marcando la casilla del menú y borrando con un click.

Elimina partes de un logotipo
Elimina partes de un logotipo
Mueve las partes de tu logotipo

Podrás mover escalar girar, sesgar crear simetrías con solo tener seccionado el elemento,

Modifica partes de un logo vectorial
Modifica partes de un logo vectorial

ya ves que facil es crear logo online gratis

Da color a tu logotipo

Darle color a tu logo y crea contornos de diferentes grosores para tu logotipo y crea degradados

para ponerlo en la paleta de colores

Colorear un logotipo
Colorear un logotipo

Guarda tu logo en formato vectorial

Guarda tu gráfico en formato svg (se descarga comprimido en zip ) o copia y pega el código en tu pagina web ( infórmate como insertar un grafico svg en la web

logo gratis

Animaciones web online es un programa para crear logo online gratis por lo que no cuenta con todo el potencial que tiene el software profesional al cual siempre te encomendare para hacer trabajos profesionales

Así como recomendar la ayuda profesional en el diseño grafico de logotipo de todo tipo de marcas o empresas

crear logo online gratis SIN REGISTRARSE

Descarga logotipos gratis
Descarga logotipos gratis

Quieres saber mas de diseño web online entra en nuestra página principal

Has logrado hacer tu logotipo gratis, que tal te ha ido cuéntamelo en tus comentarios serán muy bien recibidos

Un saludo y gracias

Formato svg

Que es el formato svg

Formato svg :Para empezar diremos que S.V.G son siglas de gráficos vectoriales escalables

Si desmenuzamos tal descripción podremos deducir que es un formato de dibujo,

que fue desarrollado por el W3C desde el año 1999.c

El forrmato SVG es ideal para crea pagina web

Por definición son gráficos en dos dimensión , aunque más adelante veremos que podemos hacer representaciones graficas y animaciones en tres dimensiones , aunque no es lo apropiado para ello

Estos dibujos son de formato vectorial , esto es, sus puntos de formación son puntos matemáticos con un determinada situación y longitud, no son cuadraditos de colores como Píxeles , Por esta condición de pueden ser ampliados hasta el infinitos sin perder ningún tipo de información de la forma de dicho dibujo

Una de las ventajas mas poderosas que tenemos en el formato S.V.G es que esta hecho en formato XML

Este formatos de textos con etiquetas de apertura y cierre tiene la ventaja que siendo texto es fácilmente modificado por otros lenguajes de programación como javascript creando autenticas locuras en transformaciones dinámica de dibujos

Otra ventaja es que dentro de texto que representa el grafico podemos también incluir texto de todo tipo de fuentes, imágenes y código en java script para el cambio dinámicamente de los gráficos sin exponerlo a fuentes externas

Una ventaja o desventaja de los gráficos svg es que su sistema de coordenadas empieza en la esquina superior izquierda así pues la x=0 y la y =0 concuerdan con esa esquina

crea pagina web

No podemos olvidar en que un svg se puede animar ,esto es, que le podemos dar movimiento a nuestro grafico, escalándolo girándolo ,distorsionándolo en un determinado espacio de tiempo, todo ello lo iremos viendo , aunque también os diré que he encontrado graves problemas de compatibilidades con los diferente exploradores.

Animación de gráficos svg, realizado en nuestro simulador https://animacionesweb.online en 3 minutos 😉 link al codigo

Ventajas del gráfico svg basado en texto

Ventajas del gráfico svg , este blog está orientado a  formación y diseño de paginas web de nuestra página principal https://animacionesweb.online

Las siglas S.V.G  pertenecen a  Scalable Vector Graphics, en castellano seria como gráficos basados en vectores escalables

SVG es un estándar Web abierto basado en texto

Es un formato que ya existía desde finales de siglo xx pero hasta ahora no se le ha dado cobertura total en los exploradores web

svg tiene la extensión en el nombre  .svg

SVG es un estándar Web abierto basado en texto

Esto es lo que nos encontramos dentro de un grafico svg si lo abrimos desde con un blog de notas

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">

<circle x="200" y="200" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
<rect x="0" y="200" width="200" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb (0,0,0)" />

</svg>

una de las Ventajas del gráfico svg es solo texto donde podemos encontrar varias secciones como cabecera y figuras simples con etiquetas de apertura y cierre que conforman el grafico svg etc,

En diferentes blog iremos explicando cada una de esas partes para que puedas dominar y modificar tu svg con solo modificar el texto que lo contiene,

Si quieres juguetear con este grafico puede hacer esto

  1. Desde el escritorio por ejemplo, boton derecho y abre nuevo documento de texto.
  2. Cambia la extensión del archivo para que sea el nombre.svg (seguramente te dira si quieres cambiar la extensión del archivo)
  3. Copia y pega el texto del código svg anterior y guarda .
  4. Arrastra el nombre del archivo a la cabecera de un explorador para abrir el archivo con el Explorer preferido
  5. Si todo ha ido bien se verán las figuras como si en una página web se tratase
  6. Cambia en el texto original la propiedad “ fill” que es el color del elemento y le pones otro
  7.  guardas y reinicias el explorador

Poder modificar un svg al ser texto es una ventaja muy considerable pues podemos acceder a sus propiedades ya sea escribiendo directamente sobre su código , como hemos realizado en el ejercicio anterior cambiando los colores de las figuras o podemos acceder a las propiedades a través de código  javascript , creando un montón de combinaciones , poco a poco iremos colocando ejemplos de cómo modificar y crear animaciones web con gráficos svg y poderlos animar  , ala izquierda podrás ver ejemplos de animaciones web creadas con este formato y realizadas desde nuestra página web cabecera https://animacionesweb.online

Un saludo y gracias por tu atención