Jorge Vallejo Blog

Blog del creativo, ilustrador y profesor de videojuegos Jorge Vallejo

Category: javascript

Animación de particulas


Últimamente estoy experimentando mucho con la animación de partículas, el video que podéis ver esta creado mediante una expresión matemática, con la que se consigue que describa círculos.
Os dejo el Código :
radius = 350; // the radius of the circle
cycle =3 // number of seconds to complete a circle; higher value = slower
if(cycle ==0){cycle = 0.001;} //avoids a “divide by zero” error
phase = 0; // initial angle in degrees from bottom
reverse = 1; // 1 for ccw, -1 for cw
x = Math.sin( reverse * degrees_to_radians(time * 360 / cycle + phase));
y = Math.cos(degrees_to_radians(time * 360 / cycle + phase));
add(mul(radius, [x, y]), position)

Primeros pasos con jquery Efectos Transparencia


¿Qué es jquery?
jQuery es una libreria de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM.(Document Object Model).
¿Por que usuarla?
Por que es bastante sencilla de utilizar, por aglutina en un unico archivo un monton de funcionalidades y por que enrique bastante tus webs.

Un ejemplo practico de esta libreria

Imaginemos como es mi caso, que queremos darle una apariencia de dinamismo a la pagina pero sin usar flash, por ejemplo vamos a hacer algo sencillo, que aparecan poco a poco los elementos de un menu.
1º Paso) Descargar la libreria jquery
2º Paso) en el head hacer la llamada a la libreria

<script src="js/jquery.js" type="text/javascript"></script>

3º Paso) Ponemos etiquetas id a nuestro menu,


<li id="li1">Enlace1</li>
<li id="li2">Enlace2</li>
<li id="li3">Enlace3</li>
<li id="li4">Enlace4</li>
<li id="li5">Enlace5</li>
<li id="li6">Enlace6</li>

4º Paso) En el head

<script type="text/javascript">
$(document).ready(function (){
$("li").hide();
$("#li1").fadeIn(300);
$("#li2").fadeIn(600);
$("#li3").fadeIn(900);
$("#li4").fadeIn(1200);
$("#li5").fadeIn(1500);
$("#li6").fadeIn(1900);
});
</script>

¿Que hemos hecho?
Primero hemos utilizado la funcion ready, que se pone en marcha mientras se carga la pagina, despues con $(“li”).hide() ocultamos todos los elementos li ,ya que para recoger el elemento que queremos usar, podemos hacer lo simplemente con $(“nombredeelemento”) o $(“nombredelId”), asi pues, una vez que hemos ocultado todos, los hacemos aparecer con la funcion fadeIn, dando distintos tiempos de menor a mayor para que aparezcan secuenciadamente.

menus css con rollover sin javascript


Un poco cansado de utilizar siempre los mismos tipos de menus y pensando en crear uno que fuera graficamente bonito, accesible y sin javascript me he encontrado con una serie de menus cuya sencillez, y belleza me han conquistado,podeis verlos aqui.
Acontinuacion una pequeña explicacion de su funcionamiento.
Lo que ocurre con estos menus es que hay una imagen que contiene los dos estados normal, y sobre, gracias al css al posicionarnos sobre el enlace lo que hacemos es cambiar las coordenadas de la imagen, de forma q nos aparezca el segundo estado.
Imagen inicial
#tabsK a {
float:left;
background:url(“tableftK.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url(“tabrightK.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
Imagen sobre (hover)
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}
Como vemos necesitamos dos imagenes, una que sera la de la esquina izquierda, y otra todo lo demas, se hace de esta forma para que la imagen se adapte al texto, hasta cierto limite que sera igual a la anchura de la imagen, pero que son sufientes caracteres.
Lo grande que tiene este menu ademas es que esta creado con una lista, de forma que si quitamos el estilo, seguimos entendiendo q se trata de un menu.
Es en mi opinión uno de los mejores sistemas de menu que he visto nunca.

Firebug q gran extension

Creo que ya me he referido a el Firebug en otro comentario (me gusta mas usar comentario a post). Pero es que es una herramienta ideal para el desarrollo, fundamentalmente por su depurador javascript que marca los errores en la linea y te devuelve donde esta, cuantas paginas abre visto que no se ven en el firefox por q tienen un error de javascript gigante, pero tambien la herramienta que permite ver el codigo fuente comprimido en etiquetas, y que “pinta” la zona en la que estas, ademas tan bien es muy util para ver imagenes dentro del codigo.
La unica pega q le veo es que no me gusta el logo del escarabajo de fuego o insecto de fuego o como se traduzca firebug. Por lo demas es altamente recomendable tenerlo.

Php problemas acentos y eñes


Algunas veces puede pasarte que al extraer el texto de una base de datos y escribirla en php , de repente los acentos y eñes, no te salgan bien en la pagina, a mi me paso utilizando la tecnologia AJAX al volcar con javascript, pos bien la solucion es simplemnte usar la funcion php <?php utf8_encode($row[‘titulo’])?> que codifica la cadena, y hace que salga con acentos y ñs.
Tambien me gustaría hacer una defensa de la ñ , que me parece no solo una letra q deberiamos de defender ya que es genuinamente española, sino que me es una letra que queda muy bien en diseño, y sino mirar la cantidad de carteles que al anunciar eventos españoles la han utilizado.

Ampliar imagen oscurecer fondo javascript


He encontrado un efecto muy chulo para cuando te pinchas y amplias una imagen, se llama
>lightbox Y os remito a su pagina , ya q el codigo esta muy bien optimizado y es muy facil de usar, ademas han mejorado otro poco en la segunda version >lightbox2 . Lo unico malo es q las paginas estan en inngles asi q en breve hare un articulo con la traducion y mas comentarios sobre este efecto q realmente me ha encando, si teneis mucha curiosidad sobre como funciona el tema aparte ir a las paginas , os dire que le hecheis un vistazo a DOM q es una forma de programar en javascript para poder acceder a elemento html, y asi crearlos o modificarlos cuando queramos o lo haga el usuario.

Mostrar / Ocultar un Div problemas en Firefox


Estaba creando una web donde ocultaba / mostraba capas al hacer click sobre ellas, cual es mi sorpresa al ver que en firefox el javascript no hacia nada.
Atencion al codigo
function muestra(cual, cuantos){
for (i=1;i<=cuantos;i++){
eval(“bloque”+i+”.style.display=’none'”);

}
eval(cual+”.style.display=’block'”);

}
El problema es que solo funciona para Explorer, en su lugar teneis que usar este:
function muestra(cual, cuantos){
for (i=1;i<=cuantos;i++){ document.getElementById(“bloque”+i).style.display=’none’;
}
document.getElementById(cual).style.display=’block’;
}

Es una funcion que recibe dos parametros uno cual , es el div que se mostrara, para ello hay que nombrarlos secuenciados “<div id=”bloque1″ <div id=”bloque2″…”
Y el otro parametro cuantos es el numero entero de divs que tengais.
Lo que hace:
Muestra la capa selecionada al llamar a la funcion en un evento por ejemplo click , y oculta todas las demas.