18 jun. 2011

Estrellas en movimiento dentro del blog (girando en circulo)

Este es otro de esos truquillos que no sirven para nada pero que se ven muy bonitos en el blog.
Se trata de unas estrellas en movimiento que giran y se expanden en círculo dentro del blog y cambian de color conforme se mueven.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Para ponerlo en tu blog entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<script language='javascript' type='text/javascript'>
//<![CDATA[
//Iván Nieto Pérez

var incremento = 0
//limite de la expansion de las letras
var y = 200
var x = 300
//posicion del centro de referencia del dibujo que describen las letras
var X = 400
var Y = 200

//velocidad de movimiento de las letras
var velocidad = 50
//mensaje que se mostrara y cuyas letras danzaran por la pantalla
//maximo 25 letras (de lo contrario, se sobrepasa el rango de colores valido)
var mensaje = "★★★★★★★★★★★★★★★★★★★★"
var numeroLetras = mensaje.length

function mueveLetras() {
for ( j = 0 ; j < numeroLetras ; j++ ) {

if (document.layers) {
letra = eval( "document.capa" + j )
letra.top = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
letra.left = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
} else if (document.all) {
letra = eval( "document.all.capa" + j )
letra.style.pixelTop = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
letra.style.pixelLeft = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
} else if (document.getElementById) {
letra = document.getElementById( "capa" + j )
letra.style.top = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10)) + 'px'
letra.style.left = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10)) + 'px'
} else //no soportado, finaliza ejecucion
return

}

incremento += .2
setTimeout("mueveLetras()", velocidad)
}

function escribeTexto() {
var texto = ''
for ( j = 0 ; j < numeroLetras ; j++ ) {
texto += '<div id="capa' + j + '" style="position:fixed; visibility:show; left:250px; top:150px; z-index:2; font-size: 2em; color: rgb(' + j*10 + ',' + (255-j*10) + ',150)">' + mensaje.charAt(j) + '</div>'
}
document.write( texto )
}


window.onload = mueveLetras;
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}

//]]>
</script>

Luego busca la etiqueta </body> y antes de ella pega esto:
<script language="javascript" type="text/javascript">
escribeTexto()
</script>

¿No te gustan las estrellas? Entonces puedes usar cualquiera de estos caracteres:
♥ ☺ ✿ ♫ ♪ ☽ ☼ ☆

Lluvia de estrellas (estilo Stars Wars, no es como el de nieve)

Código javascript de efecto de lluvia de estrellas para blog o página web,qué va hacia tu pantalla estrellándose.Es un efecto muy bonito que queda muy bien en fondo negro y sugiero que solo se utilice en fondo negro.Da la sensación como si estuvieras en el espacio,estilo Stars Wars.Puedes ver un ejemplo Aquí.Funciona tanto en Firefox,Google Chrome, e Internet Explorer. Para instalarlas en tu página web,solo debes pegar el siguiente código antes de </body> en la edición HTML:
<script type="text/javascript" src="http://inacho07.googlepages.com/starfield.js"></script>
Recuerda que el color de fondo de tu web lo eliges en la etiquieta <body> en la que puedes agregar el atributo bgcolor="black" con el nombre del color en ingles, o con su respectivo código hexagesimal con un gato (#) antes, es decir: <body bgcolor="black"> o <body bgcolor="#000000">
También sirve para blogger. Añades el código en un nuevo elemento de página,HTML/javascript.

Truco para que nive en tu blog

Este truco lo vi hace un par de días en ciudad blogger y me gustó mucho.

Se coloca de forma muy parecida a las estrellitas del cursor, solo que, para no cargar este blog más de lo necesario, he eliminado el de las estrellitas y colocado éste en su lugar.

Si tu también quieres ver nevar en tu blog, pincha aquí para ver y copiar, el código que tendrás que añadir justo encima de </head>

Luego bajas hasta el final del código y busca esto: </body> y justo encima pega ésto:
<script language='javascript' type='text/javascript'>
nieva()
</script>
Vista previa y ya verás la nieve.

Si quieres ver más copos, en el código que has copiado de mi servidor, busca var numero = 16 y modifica este número aumentándolo.

Efecto de movimiento en títulos de entradas y gadget de etiquetas al pasar el mouse

Primero que nada debemos saber que para añadir este efecto en el blog debemos tener la llamada a JQuery en nuestro blog, esta llamada se coloca solo una vez en el blog, por si no la tienes te la dejo aquí. Este código hay que pegarlo antes de </body>  :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$('a[href*=#]‘).click(function(){if(location.pathname.replace(/^\//,”)==this.pathname.replace(/^\//,”)&&location.hostname==this.hostname){var $target=$(this.hash);$target=$target.length&&$target||$(‘[name='+this.hash.slice(1)+']‘);if($target.length){var targetOffset=$target.offset().top;$(‘html,body’).animate({scrollTop:targetOffset},1000);return false}}})});
//]]>
</script>
Cotinuamos. Para añadir el efecto en tu blog ve a Diseño > Edición de HTML y pega el siguiente código antes de </body>:
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li.post h3&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>
El código anterior indica que los enlaces de los títulos de los posts y del gadget de etiquetas deben tener el efecto.

Efecto de arcoíris en links (enlaces) al pasar el mouse

Sólo entra a Diseño > Edición de HTML y pega antes de </head> esto:

<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js'/>

Opacidad en las imágenes.

Imagen con opacidad y color normal al pasar el mouse:



<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>






Imagen normal y efecto de opacidad al pasar el mouse:



<img src="URL de la imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>