danijazzero
Usuario (Argentina)
Aqui les traigo los del gta vice city pero lookeados porque la mayoria de la guia de trucos dice el codigo y lo que hace yo le voy a poner onda como jazzero que soy BIGBANG - Todos los coches explotan : FANNYMAGNET - Las mujeres te siguen : DEEPFRIEDMARSBARS - Tommy se vuelve gordo : CERTAINDEATH - Tommy fuma : ICANTTAKEITANYMORE - Suicidarse : MIAMITRAFFIC - Conductores agresivos : GREENLIGHT - Semáforos siempre verdes : SEAWAYS - Coches que flotan sobre el agua : PROGRAMMER - Tommy se vuelve delgado : AHAIRDRESSERSCAR - Todos los coches se vuelven rosas : PRECIOUSPROTECTION - Armadura al máximo : COMEFLYWITHME - Coches que vuelan : LOADSOFLITTLETHINGS - Cambiar el tamaño de las ruedas : WHEELSAREALLINEED - Sólo las ruedas serán visibles : CHICKSWITHGUNS - Chicas en bikini armadas : NOBODYLIKESME - Los peatones nos detestan : n5W7jO3jAjWLM:http://www.lagranepoca.com/pics/2008/05/30/sl/2008-05-30-sl--enojo.jpg" /> FIGHTFIGHTFIGHT - Pelea : LIFEISPASSINGMEBY - Acelerar el reloj : ASPIRINE - Salud al máximo : PANZER - Tanque Rhino • THUGSTOOLS - Armas • FROFESSIONALTOOLS - Armas • NUTTERTOOLS - Armas • PRECIOUSPROTECTION - Armadura ya saben _____________________________________________________________________________-
Bienvenidos al post, este proyecto nació desde el día que Taringa se volvió monótona así que decidí aportar en mi tiempo libre, mis conocimientos, aunque sea los más ínfimos así que disfruten.. Daniel.Introducción. Esto está redactado muy sencillamente, si te parece mucho, es que no tenes ganas de leer vago.. Hoy en día, en la web, el scripting en javascript es esencial.tanto lo es que sí, desactivaramos javascript(en lo posible) de nuestro browser, ninguna página como la conocemos sería la misma.Aclaraciones y preguntas frecuentes sobre JavaScript (rápido)¿JavaScript y Java son lo mismo? No, es una larga historia. Java es un lenguaje de programación mucho más complejo tanto que está a la altura de C/C++. NO SON LO MISMO. ¿Qué se puede hacer con JavaScript? (sacado de w3schools) JavaScript da a los diseñadores una herramienta de programación HTML - los autores de HTML normalmente no son programadores, pero JavaScript es un lenguaje con una sintaxis muy simple! Casi cualquier persona puede poner pequeños "trozos" de código en sus páginas HTML. JavaScript puede reaccionar a los acontecimientos - Un JavaScript se puede configurar para ejecutar cuando algo sucede, como cuando una página ha terminado de cargar o cuando un usuario hace clic en un elemento HTML. JavaScript puede leer y escribir los elementos de HTML - Un JavaScript puede leer y modificar el contenido de un elemento HTML. JavaScript puede ser utilizado para validar los datos - Un JavaScript puede ser utilizado para validar los datos del formulario antes de que se envíe a un servidor. Esto evita errores, o dificultades en el procesamiento. JavaScript puede ser utilizado para detectar el navegador del visitante y, dependiendo del navegador, cargar otra página diseñada específicamente para que el navegador. JavaScript puede ser usado para crear cookies - Un JavaScript puede ser usado para almacenar y recuperar información en la computadora del visitante.¿Qué programas debo usar para este lenguaje? Basta con un editor de textos (Ej: Gedit, Bloc de notas, etc.), Javascript se ejecuta(interpreta) directamente en el browser(o navegador). Pero se pueden usar programas como dreamweaver para ayudarnos a escribir nuestro código, es permitido.¿Aprender JavaScript es difícil ? No, solo es práctica. Así como cada lenguaje, una persona tiene que interesarse en buscar código, ver código, modificar código, equivocarse, probar. Es interesante lo que dice Richard Stallman "..Para aprender a escribir código para programas grandes necesitan escribir pequeños cambios en el código de programas grandes.. ". ¿Vos quién sos? Y miles de cosas más.. Todo está en que vos pienses qué necesitas, y adaptes tu códigoa eso ..Daniel..En fin, vamos sin más preámbulos, a comenzar.Dónde colocar un JavaScript <html><head><title> Hola Mundo </title><!--un código javascript podría ir aquí--></head><body><!-- o bién aquí --></body></html> Formas de colocar un JavaScript.-Puede ser con el tag.. "Script" <html><head><title> Hola Mundo </title><script type="text/javascript">//código del script</script></head><body><script type="text/javascript">// otro código .. </script></body></html> .- Pero, también desde un archivo .js (los archivos de extensión ".js" son los que contienen código JavaScript) <html><head><title> Desde archivo externo</title><script type="text/javascript" src="ejemplo1.js"></script></head><body><script type="text/javascript" src="scripts/ejemplo2.js"></script></body></html> Usando este método es muy pero muy importante cerrar con "</script>" o sinó no les va a funccar el código .- "Hola mundo" ..Vamos a comenzar con el típico hola mundo en javascript <html><head><title> Hola Mundo </title></head><body><script type="text/javascript">document.write ("hola mundo");</script></body></html> Guardar y probar un javascriptBien, usaremos dos formas de almacenar un javascript: Dentro de un html o bien dentro de un archivo JavaScript.En el caso de ser un html.. una vez dentro del bloc de notas, gedit, o bien dreamweaver, abrimos;Archivo, guardar como, le damos un nombre y le agregamos extension".html" (EJ: Ejemplo.html). PD: En el caso de dreamweaver, no es necesario. En el caso de ser un javascript .. (osea, extensión .js )Voy a hacer una aclaración.. Si, nosotros hacer un archivo externo javascript, debemos escribirlo de la siguiente manera document.write ("Hola Mundo"); Vieron? en ese caso no es necesario poner el tag "Script". luego lo guardamos como nombredearchivo.js .. y lo llamamos en un documento html.Comentarios en JavaScript <html><head><title> Hola Mundo </title><script type="text/javascript">// comentario de una sola linea/* comentario de másde una linea*/ </script></head><body><script type="text/javascript">//comentario tipo 1 /* comentario tipo 2 ejemplo 2la diferencia entre estos dos comentarios es queuno, solo puede hacer comentarios en una sola linea (tipo 1)en cambio éste (tipo 2), puede contener varias lineas.. */</script></body></html> JavaScript un lenguaje sensible (?) digo Case SensitiveCuidado, parte fatalmente teorica.. cuando decimos case sensitive es quetoma mucho en cuenta si a una variable, funcion o algoesta escrito todo con minusculas, o todo en mayusculas o con intervalos..entoncesej: PEPITO; no es lo mismo que PEpITO; ni que.. pePITO; fijensen todo lo que vamos aprendiendo, son conceptos sencillos que pueden servirles en un futuro próximo.. en fin, sigamosAclaración: Este post está incompleto, lo postee debido a que el editor de Taringa! agrega etiquetas [ color ] innecesarias..
¿como les va? mucho gusto yo soy Daniel una persona, colgadisimo.Ok vamos al grano hoy vamos a ver los temas de las funciones, los bucles y otrosperdonen por colgarme es que he estado en varios asuntos (fapeo) entonces no pude postear.Funciones: Una función contiene un código que será ejecutado por un evento o por una llamada a la función. sintaxis para declarar una función function MyFuncion(parametros); { codigo de la funcion // pueden ser variables, contener sumas, bucles, etc} ACLARACION : Si ponemos una variable en una función, esa variable va a ser local, esto significa que esa variable solo va a poder ser usado por esta funciónEjemplo práctico función fácil <html><head></head><body><script type="text/javascript">function mostrarMensaje(mensaje, color){ //variable local solo funciona en la funcion if(color == "rojo"){ document.write("<p style='color:red'>" + mensaje + "</p>"); }else{ document.write("<p style='color:blue'>" + mensaje + "</p>"); } }mostrarMensaje("Este es mi mensaje","rojo");mostrarMensaje("Este es otro mensaje","negro");</script></body></html> Ejemplo práctico 2 usando returncalcula el precio con descuento preescrito <html><body><script type="text/javascript">function calcularDescuento(precio,descuento) { var final = precio-(precio*descuento/100); return final; }var precioPagado = calcularDescuento(600, 35);document.write("el precio con descuento es de " + precioPagado);</script></body></html> ACLARACION: Usando return podemos usar una variable de una función (habíamos dicho que no se podía, ahora si)Bucle Foreste sirve para repetir una accion determinada cantidad de vecesSintaxis for (variable=numerodeinicio;variable<=valor final;variable+niveldeincremento){código a ser ejecutado} ejemplo práctico <html><body><script type="text/javascript">var i=0;for (i=0;i<=5;i++) //revisa los operadores de uno de los post anteriores{document.write("el numero es " + i);document.write("<br />");}</script></body></html> Este programa va a generar un texto que llegue hasta 5 (empezando del cero, con incrementos de 1 en 1)que es muy diferente a hacer lo siguienteejemplo práctico 2 <html><body><script type="text/javascript">var i=0;for (i=0;i<5;i++) //revisa los operadores de uno de los post anteriores{document.write("el numero es " + i);document.write("<br />");}</script></body></html> usando break ! (break viene del ingles romper) <html><body><script type="text/javascript">var i=0;for (i=0;i<5;i+0.5) { if(i==3) { break; }document.write("el numero es " + i);document.write("<br />");}</script></body></html> Bucle Whilea diferencia del for, el while se maneja con un valor booleano, osea, se va a ejecutar mientras un valor sea verdadero, o sinó pasará de largosintaxis while (variable<=valorfinal) { codigo a ser ejecutado } ejemplo <html><body>// este script va a preguntar un nombre y en el caso de que // el nombre no exista, va a seguir pidiendo el nombre ..var nombre = prompt ("ingrese su nombre");while (nombre=="") // mientras el nombre esté vacío { nombre= prompt ("ingrese su nombre"); // js debe mostrar el prompt este }document.write ("bienvenido/a "+nombre); //una vez cumplido el while, va a escribir... //bienvenido + el nombre que haya puesto la persona..</body></html> Es una buena manera de acosar a los usuarios de una página.Eso fue todo, nos vemos la próxima, pidanle a Satan que me deje dormir, denuevo, saludos a todos/asPara ver mis otros posts haz clic acá
Bienvenidos otra vez.. a una nueva entrega de estos tutoriales. Hoy vamos a tocar un tema sencillo, que son; los booleanos y algunos caracteres especiales de JavaScript. Boolean Object para crear un nuevo objeto booleano procedemos de la siguiente manera <html> <body> <script type="text/javascript"> var myboolean=new Boolean(); </script> </body> </html> El objeto booleano representa dos valores true o false los booleanos contienen parametros que pueden ser .. - 0 - -0 - null - "" - undefined - NaN pero siempre van a ser true o false por ejemplo null es false. algunas aclaraciones: NaN signifca Not-a-Number, null es nulo, "" seria lo que intepretamos como un espacio vacio, Para qué nos sirve esto ? - Nos sirve para el control de datos, por ejemplo si pedimos en un formulario un valor numerico y el usuario pone una letra, podemos identificar a eso como un NaN y escribir más codigo para que en caso de que haya un valor que No sea un numero, dé un alerta al usuario... así tambien con los otros. un ejemplo, donde me pide mi nombre y si, el nombre esta vacio(osea, si es "" ). que vuelva a preguntar mi nombre <html> <body> <script type="text/javascript"> var nombre = prompt("escriba su nombre"); while(nombre==""){ nombre = prompt("por favor escriba su nombre"); } document.write("gracias por colaborar " + nombre); </script> </body> </html> y podemos extender el script para que el nombre sea mayor a tres letras (hay personas que se llaman Ana) que es el numero minimo para un nombre.. <html> <body> <script type="text/javascript"> var nombre = prompt("escriba su nombre"); while(nombre=="" || nombre.length < 3){ nombre = prompt("por favor escriba su nombre"); } document.write("gracias por colaborar " + nombre); </script> </body> </html> Ves qué sencillo ? leyendolo decimos que mientras, el nombre este vacio, o la variable nombre tiene menos de tres caracteres, vuelva a pedir la informacion. podes extender lo que quieras tus scripts.. Los objetos en general tienen dos propiedades globales que son prototype & constructor , estas las veremos más adelante. Metodos.. Los metodos aplicados a los objetos booleanos son dos.. Metodo toString() convierte un booleano en string <html> <body> <script type="text/javascript"> var bool = new Boolean(null); document.write(bool.toString()); </script> </body> </html> Metodo typeOf() devuelve el valor de un objeto, este es un metodo casi global para los objetos <html> <body> <script type="text/javascript"> var bool = new Boolean(0); document.write(bool.valueOf()); </script> </body> </html> les aconsejo que prueben este script para conocer los valores de los parametros como NaN, etc <html> <body> <script type="text/javascript"> var b1=new Boolean(false); var b2=new Boolean(1); var b3=new Boolean(""); var b4=new Boolean(null); var b5=new Boolean(NaN); var b6=new Boolean("false"); document.write("0 is boolean "+ b1 +"<br />"); document.write("1 is boolean "+ b2 +"<br />"); document.write("An empty string is boolean "+ b3 + "<br />"); document.write("null is boolean "+ b4+ "<br />"); document.write("NaN is boolean "+ b5 +"<br />"); document.write("The string 'false' is boolean "+ b6 +"<br />"); </script> </body> </html> Bueno esos fueron los metodos y una referencia sobre los booleanos Special Text cuando ponemos texto en javascript puede ser que necesitemos usar algunos caracteres especiales aca les va la su codigo y la salida Codigo Salida ' comillas simples " comillas dobles \ barra diagonal inversa n nueva linea r sangria t tabulacion b un espacio la forma de usarlo es sencilla, la incluimos entre comillas en el codigo dos ejemplos para que sean felices... <html> <body> <script type="text/javascript"> var txt="uno n dosntresrcuatro , etc tnrdaniel"; alert(txt); </script> </body> </html> otro <html> <body> <script type="text/javascript"> var txt="script generado por n danijazzero n'asd' "; alert(txt); </script> </body> </html>
Los Espero en mi blog para compartir estos tutoriales de JQuery que voy a ir subiendo... Aca les dejo el segundo http://probacodigos.blogspot.com.ar/2012/06/tutorial-de-jquery-parte-2.html Tema : Selectores En este pdf que podes conseguir de manera gratuita vas a encontrar una sólida base sobre selectores de JQuery, hoy en dia JQuery es una herramientas que nos permite realizar más acciones, escribiendo menos que con JavaScript. Que tengan un buen dia y hasta luego! Siganme y habrá más baby!
Bien, hoy les traigo un truquito bastante sencillo pero muy buscado, que es sencillamente, sacar el ancho/alto de la ventana del cliente para tener una referencia del tamaño de nuestros elementos: como las tablas, objetos, imagenes... aqui el script <html> <head> <script type="text/javascript"> function alertSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //No-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } window.alert( 'Width = ' + myWidth ); window.alert( 'Height = ' + myHeight ); document.getElementById("resultado").innerHTML="El ancho de la pagina es de "+ myWidth +"px y el alto es de "+ myHeight +"px"; } </script> </head> <body> <a href="javascript:alertSize();" > mostrar Height / Width </a> <p id="resultado"></p> </body> </html> Esto podes usarlo para acomodar los anchos de tus elementos de paginas.. ver online : http://danijazzero.99h.com.ar/jsanchoalto/index.html probalo ! en mi blog podes descargar el codigo de ejemplo.... mi blog : http://probacodigos.blogspot.com.ar/ Si queres màs, seguime en poringa y vas a ver más
Bienvenidos perras, estamos avanzando a pasos agigantados en los tutoriales, vayan remojando las barbas que esto va a estar genial... Cómo les va perrass? espero que bien, hoy dia les traigo un tutorial sobre animacion en JQuery que va a ser muy interesante porque van a ver algunos conceptos interesantes, con el que van a poder empezar a jugar hdps.... recuerden que los tutoriales son gratis y gratis... http://probacodigos.blogspot.com.ar/2012/06/tutorial-de-jquery-parte-4.html En este tutorial se va a enseñar funciones de animacion como -hide -show -toggle -slideDown -slideUp -slideToggle -fadeIn -fadeOut -fadeTo -animation http://probacodigos.blogspot.com.ar/ Nos vemos, seguime y te hago el amor (:
Bueno les cuento que estuve -en un rato libre- haciendo pruebas con jQuery y es demasiado amplia la variedad de cosas que podemos hacer y se los voy a mostrar este formulario es solo de prueba disfrutenlo Ver http://danijazzero.99h.com.ar/formpruebajQuery/index.html Codigo completo <html><head><title>Formulario con jQuery y JavaScript</title><style type="text/css">body{ margin:0px; }.fuentes:hover { background-color:#CF9; }</style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script><script type="text/javascript"> $(document).ready(function(){ $("body").hide(); $("html").css("background-color","black"); alert ("Gracias por visitar la paginan ttDanijazzero"); $("html").css("background-color","white"); $("body").show(100); });$(document).ready(function(){ //ordenes de ocultar los elementos que luego vamos a mostrar $("#mex").hide(); $("#col").hide(); $("#ven").hide(); $("#arg").hide(); //foco/sinfoco metodo para el Nombre $("#textonombre").focus(function(){ $(this).css("color","green"); $(this).css("background-color","#FFFFA0"); }); $("#textonombre").focusout(function(){ $(this).css("color","black"); $(this).css("background-color","#FFFFFF"); }); //lo mismo pero para apellido $("#textoapellido").focus(function(){ $(this).css("color","green"); $(this).css("background-color","#FFFFA0"); }); $("#textoapellido").focusout(function(){ $(this).css("color","black"); $(this).css("background-color","#FFFFFF"); }); //lo mismo para Email $("#textoemail").focus(function(){ $(this).css("color","green"); $(this).css("background-color","#FFFFA0"); }); $("#textoemail").focusout(function(){ $(this).css("color","black"); $(this).css("background-color","#FFFFFF"); }); //selectores para paises //Arg $("#Argentina").click(function(){ $("#arg").show(); $("#ven").hide(); $("#mex").hide(); $("#col").hide(); }); //Mex $("#Mexico").click(function(){ $("#arg").hide(); $("#ven").hide(); $("#mex").show(); $("#col").hide(); }); //Ven $("#Venezuela").click(function(){ $("#arg").hide(); $("#ven").show(); $("#mex").hide(); $("#col").hide(); }); //Col $("#Colombia").click(function(){ $("#arg").hide(); $("#ven").hide(); $("#mex").hide(); $("#col").show(); });}); </script></head><body><div id="principal" align="center"><table width="600" border="0"> <tr> <td width="190">Nombre:</td> <td width="271" align="center"> <input type="text" value="" id="textonombre" /></td> <td width="125"></td> </tr> <tr> <td>Apellido:</td> <td align="center"> <input type="text" value="" id="textoapellido" /> </td> <td></td> </tr> <tr> <td>Email:</td> <td align="center"><input type="text" value="" id="textoemail"/></td> <td></td> </tr> <tr> <td>Pais</td> <td align="center"> <div id="paises" > <img id="Argentina" src="http://www.lopesdasilva.adv.br/imagens/ico_argentina.gif" /> <img id="Mexico" src="http://www.sitekiosk.com/Images/Flags/mexico_ico.gif" width="31" height="19" /> <img id="Venezuela" src="http://www.otca.org.br/destinoamazonia/es//templates/ada2009/images/ico_venezuela.gif" /> <img id="Colombia" src="http://www.oas.org/imgs/flags/small/sm_colombia.jpg" /> </div> </td> <td> <div id="modificable"> <p id="arg"> Argentina </p> <p id="mex"> Mexico </p> <p id="col"> Colombia </p> <p id="ven"> Venezuela </p> </div> </td> </tr> <tr> <td></td> <td align="center"> </td> <td> </td> </tr></table><script type="text/javascript"> function resetChanges(){ $("body").css("background","white"); $("body").css("color","black"); }</script><p>configuraciones de formulario <input type="button" onclick="resetChanges()" value="resetear" /></p><script type="text/javascript">$(document).ready(function(){ $("#negro").click(function(){ $("body").css("background","black"); }); $("#blanco").click(function(){ $("body").css("background","white"); }); $("#rojo").click(function(){ $("body").css("background","red"); }); $("#verde").click(function(){ $("body").css("background","green"); });});</script><p>color de fondo<br><img id="negro" src="http://www.xieldecohogar.com/modelos/RIO/colores/tn_Negro.jpg" width="20" height="20" /><img id="blanco" src="http://www2.dupont.com/Powder_Coatings/es_CO/assets/images/lean_colors/blanco-brill-ep9000-p.jpg" width="20" height="20"/><img id="verde" src="http://4.bp.blogspot.com/_4iVtwkKqhF4/S3xvXegADvI/AAAAAAAABwk/X0QfwPi9WXk/s400/pensa-verde.ico" width="20" height="20" /><img id="rojo" src="https://sites.google.com/site/bloglapsus/base/rojo.gif" width="20" height="20" /></p><script type="text/javascript">$(document).ready(function(){ $("#arial").click(function(){ $("*").css("font-family","Arial"); }); $("#verdana").click(function(){ $("*").css("font-family","Verdana"); }); $("#georgia").click(function(){ $("*").css("font-family","Georgia"); }); });</script><p>tipo de tipografia <br><table width="300" border="0"> <tr> <td align="center"><div class="fuentes" id="arial" style="font-family:Arial, Helvetica, sans-serif"> Arial </div></td> </tr> <tr> <td align="center"><div class="fuentes" id="verdana" style="font-family:Verdana, Geneva, sans-serif"> Verdana</div></td> </tr> <tr> <td align="center"><div class="fuentes" id="georgia" style="font-family:Georgia, 'Times New Roman', Times, serif"> Georgia </div></td> </tr></table></p><script type="text/javascript">$(document).ready(function(){ $("#negrofont").click(function(){ $("body").css("color","black"); }); $("#blancofont").click(function(){ $("body").css("color","white"); }); });</script><p> Color de fuente <br><img id="negrofont" src="http://www.xieldecohogar.com/modelos/RIO/colores/tn_Negro.jpg" width="20" height="20" /><img id="blancofont" src="http://www2.dupont.com/Powder_Coatings/es_CO/assets/images/lean_colors/blanco-brill-ep9000-p.jpg" width="20" height="20"/></p></div></body></html> Gracias por visitar el post
Bienvenidos Hoy les traigo un manual de PHP Básico ! 01 - Variables http://probacodigos.blogspot.com/2012/08/php-basico-variables.html 02 - Operadores http://probacodigos.blogspot.com/2012/08/php-basico-operadores.html 03 - If..Else http://probacodigos.blogspot.com/2012/08/php-basico-ifelse.html 04 - Switch http://probacodigos.blogspot.com/2012/08/php-basico-switch.html 05 - Arrays http://probacodigos.blogspot.com/2012/08/php-basico-arrays.html 06 - While http://probacodigos.blogspot.com/2012/08/php-basico-while-loop.html 07 - For..Foreach http://probacodigos.blogspot.com/2012/08/php-basico-for-y-foreach.html 08 - Function http://probacodigos.blogspot.com/2012/08/php-basico-function.html 09 - GET - POST http://probacodigos.blogspot.com/2012/09/php-basico-get-post.html Gracias por ver, si te gusto, seguime! Si queres ver otros contenidos visita mi blog http://probacodigos.blogspot.com.ar/
Bien perras, aca estoy de nuevo trayendoles un nuevo post para que puedan animar cosas con css 3 siempre vamos a ver lo más elemental para que ustedes tengan una guia o un punto de partida en el cual puedan desenvolverse segun su creatividad o su obligacion jaja. Bueno, con CSS3 tenemos un problema, la compatibilidad, dado a que no todos los usuarios tienen el mismo navegador, no todos los navegadores tienen las mismas funcionalidades ni el mismo motor de renderizado por lo que la propiedad ANIMATION va a ser compatible en.. : AHORA si los siguientes navegadores, no lo soportan, porque son putos.. Bien, ahora vamos a hacer un par de ejemplos simples para que puedan entender esto. primero vamos a hacer una pagina para agregarle animacion con CSS3 <html> <head> <title> Mi Animación con css3 </title> <style type="text/css"> div#animajazz{ width:100px; height:100px; position:relative; background:red; } </style> </head> <body> <div id="animajazz"> </div> </body> </html> NOTA: la propiedad POSITION es necesaria, porque, si no la definimos (en algun punto), la animacion no se va a reproducir. Si no me cree, intentelo usted mismo (es más saludable) ESTE ES NUESTRO PUNTO DE PARTIDA La propiedad animation tiene siete propiedades -animation-name, -animation-duration, -animation-timing-function, -animation-delay, -animation-iteration-count, -animation-direction. -animation-play-state animation-name Es la propiedad para darle un nombre a la animación sintaxis animation-name: keyframename; keyframename : nombre de la animación Ejemplos -moz-animation-name:mymove; /* Firefox */ -webkit-animation-name:mymove; /* Safari y Chrome */ [/color] Estan con el prefijo -moz-animation-propiedad y -webkit-animation-propiedad para que los navegadores los reconozcan y puedan usarlos de buena manera, ustedes ponganlo nomas -animation-duration define cuántos segundos o milisegundos una animación tarda en completar un ciclo. sintaxis animation-duration: tiempo; El tiempo lo ponemos en segundos, por ejemplo "5s" aca tambien usamos los prefijos moz y webkit pero se van a convertir en -moz-animation-duration:5s; /* Firefox */ -webkit-animation-name:duration: 5s; /* Safari y Chrome */ tambien lo podemos poner en milisegundos, pero seria algo como "5000ms" -animation-timing-function define la velocidad de la transicion, es decir, si va a ser igual en todas las partes de la animación podemos poner nuestros propios valores, pero existen varios valores predeterminados, linear (La animación tiene la misma velocidad de principio a fin) ease (Por defecto. La animación tiene un comienzo lento, luego rápido, antes de que llegue, lento) ease-in (La animación tiene un comienzo lento) ease-out (La animación tiene un final lento) ease-in-out (La animación tiene tanto un comienzo lento y un final lento) agregandolo a nuestra funcion quedaria algo como -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-delay Es un propiedad que indica cuando se inicia una animación sintaxis animation-delay: tiempo; El tiempo puede ser en segundos (Ej: "4s" ) , o en milisegundos (Ej: "3000ms" ) a nosotros nos quedaria algo como -moz-animation-delay: 2s; /*Firefox*/ -webkit-animation-delay: 2s; /* Chrome y Safarix*/ animation-iteration-count Esta propiedad define cuántas veces una animación reproducir.el valor por defecto es 1. sintaxis: animation-iteration-count: valor; el valor puede ser un numero entero o infinite, que se imaginaran que infinite repite una animacion para siempre. En nuestro caso vamos a poner -moz-animation-iteration-count:3; /* Firefox */ -webkit-animation-iteration-count:3; /*Safari and Chrome*/ animation-direction Esta propiedad define si la animación se reproducira a la inversa en ciclos alternos. Si el valor de la animación, la dirección es "alternativo", la animación se reproducirá de forma normal cada vez impar (1,3,5, etc.) Y hacia atrás cada vez que sea par (2,4,6, etc ..). Nota: Si la animación está definida para reproducirse sólo una vez, esta propiedad no tendrá ningún efecto. sintaxis animation-direction: normal|alternate; normal : valor por defecto. La animación se reproduce normalmente alternate: Si el valor de la animación, la dirección es "alternativo", la animación se reproducirá de forma normal cada vez impar (1,3,5, etc.) Y hacia atrás cada vez que sea par (2,4,6, etc ..). animation-play-state Directamente tiene dos estados que son, running | paused sintaxis animation-play-state: running | paused; Bueno, para no escribir tantas lineas al pedo, hay una sintaxis que vamos a usar y que es más conveniente es la siguiente animation: name duration timing-function delay iteration-count direction; en el caso de mozila -moz-animation: name duration timing-function delay iteration-count direction; y para Chrome y Safari -webkit-animation: name duration timing-function delay iteration-count direction; Obviamente podemos omitir valores Ejemplo: animation:moviendo 5s infinite; -moz-animation:moviendo 5s infinite; /* Firefox */ -webkit-animation:moviendo 5s infinite; /*Safari y Chrome*/ ahorras más espacio que si hicieras algo como.. div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; /* Firefox: */ -moz-animation-name: myfirst; -moz-animation-duration: 5s; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-play-state: running; /* Safari y Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; } Bien hasta ahi es la parte teorica; ahora, vamos a algo más práctico Vamos con @keyframe con @keyframe lo que hacemos es directamente, agregar animación su sintaxis es la siguiente: @keyframes animationname {keyframes-selector {css-estilos;}} NOTA: keyframes-selector puede ser OTRA animacion anidada (añadida) y los valores... FROM - TO (desde- hacia) ó 0% - 100% (0% es el principio de la animacion, y 100% seria el final) Para mayor compatibilidad se usa este ultimo (0%-100%) y .. En el codigo quedaria algo como <html> <head> <title> Mi Animación con css3 </title> <style type="text/css"> div#animajazz{ width:100px; height:100px; position:relative; background:red; animation:moviendo 5s infinite; -moz-animation:moviendo 5s infinite; /* Firefox */ -webkit-animation:moviendo 5s infinite; /*Safari y Chrome*/ } @keyframes moviendo { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-moz-keyframes moviendo /*Firefox*/ { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-webkit-keyframes moviendo /* Safari y Chrome */ { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } </style> </head> <body> <div id="animajazz"> </div> </body> </html> Ejemplo completo (SI QUERES VERLO ENTRA EN ) <html> <head> <style type="text/css"> h3,h4{color:white; text-align:center} a:link{text-decoration:none; color:white} a{text-decoration:none; color:white} a:visited{text-decoration:none; color:white} div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /*Safari y Chrome*/ } @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-moz-keyframes mymove /*Safari y Chrome */ { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } @-webkit-keyframes mymove /* Safari y Chrome */ { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } </style> </head> <body> <p><b>Note:</b> Este Ejemplo No funciona en Internet Explorer ni en Opera.</p> <div><h3>Seguime</h3><h4><a href="http://www.taringa.net/danijazzero" target="_blank">Danijazzero</a></h4></div> </body> </html> Otro Ejemplo VERLO Gracias hdps y nos vemos la proxima, si quieren más, siganme.. chau <3