Estos efectos les va a gustar a muchos, creo yo (o no? xD). Se trata de unos geniales y muy realistas efectos de Fuegos artificiales con Javascript para tu pagina web. Especiales para este martes a las 00:00, que comienza un nuevo año.
Para simplificarles la vida me he metido en el código para que las imágenes no tengan que subirlas ustedes, crear carpetas y demás. Yo las he subido a un hosting, asi que solo tendrán que pegar el código en su web. :D
Los Fuegos Artificiales están divididos en dos categorias:
1.- Los que aparecen en forma aleatoria por toda la página desde el comienzo: Ejemplo
2.- Los que son "Lanzados" desde la parte inferior de tu web, y luego explotan en el "aire": Ejemplo
Elige el que más te guste viendo los ejemplos, Copias el respectivo codigo y lo pegas justo DESPUES - abajo de <head>
1.- Fuegos artificiales explotando
Efecto Fuegos artificiales 1
Codigo:
<script src="http://inacho07.googlepages.com/fuego1.js" type="text/javascript"/>
Efecto Fuegos artificiales 2
Codigo:
<script src="http://inacho07.googlepages.com/fuego2.js" type="text/javascript"/>
Efecto Fuegos artificiales 3
Codigo:
<script src="http://inacho07.googlepages.com/fuego3.js" type="text/javascript"/>
Efecto Fuegos artificiales 4
Codigo:
<script src="http://inacho07.googlepages.com/fuego4.js" type="text/javascript"/>
2.- Lanzamiento de Fuegos artificiales
Lanzamiento Fuegos artificiales 1
Codigo:
<script src="http://inacho07.googlepages.com/fuegos1.js" type="text/javascript"/>
Lanzamiento Fuegos artificiales 2
Codigo:
<script src="http://inacho07.googlepages.com/fuegos2.js" type="text/javascript"/>
Lanzamiento Fuegos artificiales 3
Codigo:
<script src="http://inacho07.googlepages.com/fuegos3.js" type="text/javascript"/>
Lanzamiento Fuegos artificiales 4
Codigo:
<script src="http://inacho07.googlepages.com/fuegos4.js" type="text/javascript"/>
Lanzamiento Fuegos artificiales 5
Codigo:
<script src="http://inacho07.googlepages.com/fuegos5.js" type="text/javascript"/>
Ponle el enlace de "Lanzar" y "Detener"
Para eso solo debes poner un enlace en cualquier parte de tu web, con este código:
<A HREF="#" onClick="myFW.stop();return false;">Detener</A><br>
<A HREF="#" onClick="myFW.start();return false;">Lanzar</A><br>
Si quieres cambias el texto en verde.
Feliz Año nuevo a todos! pasenla bien! y moderadamente.. jeje ^^
Mas nieve para agregar a tu web o blog! Este tercer efecto de nieve gracias a javascript que traigo es mucho mas real que los anteriores, ya que la nieve cae en forma zigzageante, como la real!
Mira el ejemplo aqui.
Actualizacion:El código y ejemplo no estaban funcionando debido a que el servidor murió x_X, ahora estan en linea, pero si desean bajan el .js y lo suben a un servidor para mas seguridad.
Para agregarlo a tu web, debes insertar el codigo despues de <head> en edicion HTML.
Y para blogger, vas a Diseño, edicion Html, y lo pegas abajo del tag <head>
Codigo:
<script type="text/javascript"
src="http://inacho.site90.com/snow.js"> </script>
Feliz Navidad y prospero año nuevo! :D
Siguiendo con los efectos que decoran tu sitio, ahora que se viene navidad y si no neva en tu país por lo menos tu pagina web o blog si puede hacerlo con este bonito efecto. Ese es un ejemplo.
Si lo vas a usar en blogger puedes añadir un nuevo elemento de pagina, HTML/javascript y pegar el codigo ahi.
Si es para tu web personal, editas en visión HTML y pegas el código antes de </body>
Codigo para el efecto 1:
En este post hay otro efecto de nieve con Javascript.
Espero les guste, saludos!
Un efecto al estilo de las burbujas flotantes. Una lluvia de estrellas en tu pagina web o blog de blogger que va hacia tu pantalla y pareciera que fueras a estrellarte con ellas! :O! jeje. Aunque lo puedes usar en páginas oscuras para que sea visible, especialmente en las de fondo negro, creo un bonito efecto a lo star wars.
Puedes ver un ejemplo en un blog aqui. Funciona tanto en Internet Explorer como en Firefox ^^
Para instalarlas en tu web, solo debes pegar el siguiente codigo antes de </body> en la edicion 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 codigo hexagesimal con un gato (#) antes, es decir: <body bgcolor="black"> o <body bgcolor="#000000">
Tambien sirve en blogger. Añades el codigo en un nuevo elemento de pagina, HTML/javascript.
salu2
Un bonito efecto para tu pagina web, burbujas que flotan hasta desaparecer en el marco superior. Puedes cambiar la imágen por otra si quieres, la que está por defecto es esta:
Qué editar: La direccion de la imágen la puedes cambiar por la que quieras, la direccion de esta burbuja, es http://img525.imageshack.us/img525/633/bubblewin2av4.png
Numero de burbujas que aparecerán:
var no= 15;
Para agregar nuevas imágenes, solo tienes que insertar una nueva línea y aumentar el número que hay entre los corchetes []
snow[0] = "http://..."
snow[1] = "http://..."
snow[2] = "http://..."
snow[3] = "http://..."
snow[4] = "http://..."
snow[5] = "http://..."
[Código Actualizado] El siguiente codigo lo debes pegar antes de </body>
<script language="JavaScript1.2">
<!-- Begin
var no = 15; // cantidad de imágenes
var speed = 2; // Velocidad de desplazamiento de las imágenes
var snow = new Array();
snow[0] = "http://img525.imageshack.us/img525/633/bubblewin2av4.png"
snow[1] = "http://img525.imageshack.us/img525/633/bubblewin2av4.png"
snow[2] = "http://img525.imageshack.us/img525/633/bubblewin2av4.png"
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;
if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End -->
</script>
Aqui unos buenos codigos para hacer que el titulo se mueva de diferentes formas, al igual que la barra de estado, donde ademas del movimiento, un codigo para mostrar varios mensajes en ella.
Movimiento en el Titulo de la Pagina
Codigo 1. De derecha a izquierda - (Mira el ejemplo)
Pegalo dentro de las etiquetas <HEAD> y </HEAD>
Nota: Solo puedes editar lo que esta en Rojo!
<script type="text/JavaScript">
var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",150)
}
if (document.title)
titlemove()
</script>
----------------------------------
setTimeout("titlemove()",150), esta línea se refiere a la velocidad del movimiento del titulo.
Lo mas probable es que cuando se mueva el titulo se junte el final con el inicio del mismo. Para evitarlo puedes usar un espacio al final del titulo con "& n b s p ;" (todo junto incluyendo el punto y coma pero no las comillas) porque el HTML no lee un espacio si no hay otro caracter al lado.
Ejemplo: <title>Creando Web - Codigos y recursos</title> al estar en movimiento se vería: Creando Web - Codigos y recursosCreando Web - Codigos y recursos.
Entonces hacemos esto: <title>Creando Web - Codigos y recursos& n b s p ;</title>
A menos que uses blogger, wordpress o cualquiera de esos en que ponen el titulo dentro de una caja de texto y no necesariamente necesitas editarlo en HTML. Si es asi solo agregas un espacio normal al final del titulo ^^
Codigo 2. Flechas hacia el titulo - (Mira el ejemplo)
Pegalo dentro de las etiquetas <HEAD> y </HEAD>
<Script>
var titletext="CreandoWeb.cl.nu"
var thetext=""
var started=false
var step=0
var times=1
function welcometext()
{
times--
if (times==0)
{
if (started==false)
{
started = true;
document.title = titletext;
setTimeout("anim()",1);
}
thetext = titletext;
}
}
function showstatustext(txt)
{
thetext = txt;
setTimeout("welcometext()",4000)
times++
}
function anim()
{
step++
if (step==7) {step=1}
if (step==1) {document.title='>==='+thetext+'===<'}
if (step==2) {document.title='=>=='+thetext+'==<='}
if (step==3) {document.title='==>='+thetext+'=<=='}
if (step==4) {document.title='=>=>'+thetext+'<=<='}
if (step==5) {document.title='==>='+thetext+'=<=='}
if (step==6) {document.title='===>'+thetext+'<==='}
setTimeout("anim()",200);
}
if (document.title)
window.onload=onload=welcometext
</script>
-----------------------------------
A diferencia del anterior, aqui debemos escribir el titulo en el codigo. Por lo que cuando este cargando la pagina va a salir el titulo normal, y al terminar de cargar saldrá el del codigo con las flechas que se mueven hacia el.
Editas el titulo donde dice: CreandoWeb.cl.nu
y las flechas que estan en rojo las cambias por lo que quieras, recuerda que van apareciendo en orden.
La velocidad la cambias más abajo en setTimeout("anim()",200);
Barra de Estado
Nota: Solo funcionan en IExplorer!!
Codigo 1. Mensaje en la Barra de Estado con Efecto - (Mira el ejemplo)
Pegalo dentro de las etiquetas <HEAD> y </HEAD>
<script language="JavaScript">
function snapIn(jumpSpaces,position)
{
var msg = "CREANDOWEB - CODIGOS Y RECURSOS"
var out = ""
if (killScroll) {return false}
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1)
{
position++
if (msg.charAt(position) == ' ') {position++}
jumpSpaces = 100-position
}
else if (jumpSpaces > 3) {jumpSpaces *= .75}
else {jumpSpaces--}
if (position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,5);
} else {
scrolling = false
return false
}
return true
}
function snapSetup() {
if (scrolling)
if (!confirm('Re-initialize snapIn?'))
return false
killScroll = true
scrolling = true
var killID = window.setTimeout('killScroll=false',6)
scrollID = window.setTimeout('snapIn(100,0)',10)
return true
}
//-------------------------------------------------------------
var scrollID = Object
var scrolling = false
var killScroll = false
//-------------------------------------------------------------
</script>
<body onload="snapSetup()">
Codigo 2. Varios Mensajes en la Barra de Estado - (Mira el ejemplo)
Pegalo dentro de las etiquetas <HEAD> y </HEAD>
<script language="JavaScript">
<!--
var current = 0
var x = 0
var speed = 40
var speed2 = 1000
function initArray(n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
typ = new initArray(12)
typ[0]=" • Texto 1 "
typ[1]=" • Texto 2 "
typ[2]=" • Texto 3 "
typ[3]=" • Texto 4 "
typ[4]=" • CreandoWeb "
typ[5]=" • Codigos "
typ[6]=" • Recursos "
typ[7]=" • Lecciones "
typ[8]=" • y Mucho mas... "
typ[9]=" • Texto 10 "
typ[10]=" • Texto 11 "
typ[11]=" • Y ahora volvemos al Texto 1 ^^ "
function typewrite() {
var m = typ[current]
window.status = m.substring(0, x++) + "•"
if (x == m.length + 1) {
x = 0
current++
if (current > typ.length - 1) {
current = 0
}
setTimeout("typewrite()", speed2)
}
else {
setTimeout("typewrite()", speed)
}
}
typewrite()
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
---------------------------
La velocidad La editas en:
var speed = 10
var speed2 = 300
* Entre más grande el numero más lento se mueve.
Los textos... si quieres quitar textos, empieza eliminando desde el 11 hacia arriba. Pero luego tienes que cambiar la cantidad de textos que dejaste aqui:
typ = new initArray(12) <-- Aqui 12, porque hay [11] textos empezando desde el [0]
Eso es to, eso es to, es todo amigos! xD
Bloquar boton secundario del mouse
Este código te servirá para evitar que usen el botón derecho del raton en tu página web, por lo tanto no podrán copiar ni seleccionar.
Pegalo en Vista HTML en tu página web (Entre <html> y </html>)
Cambiar el Cursor (puntero del ratón) en tu pagina web
Codigo General:
Ahora debes hacer lo siguiente
Para que funcione debes subir tus cursores al hosting donde tienes tus páginas y a este código le cambias la dirección por la del cursor tuyo. (Busca en google por Descargar cursores .cur)
Ejemplo:
Si tu cursor se llama cursor.cur y lo tienes en la carpeta llamada miscursores y tu web se llama www.tupagina.com, entonces la ruta sería esta:
http://wwww.tuapagina.com/miscursores/cursor.cur
que en el código quedaría así. Por lo tanto este ↓ es el código que deberías insertar en tu web.
Nota: Solo es un ejemplo! debes seguir los pasos para tener tu código.
Nota: Solo es un ejemplo! debes seguir los pasos para tener tu código.
Cuando ya hayas subido el cursor y cambiado la dirección en el código puedes pegarlo en Vista HTML en tu página web (Entre <head> y </head>)
Si ya te aburriste del color de fondo de tu página web y quieres darle más estilo con una imágen de fondo o cambiar el color predeterminado de los links y no sabes cómo, ahora te lo explico. =)
Con el Editor | Por medio de HTML
Con el Editor
Es muy simple. Vas a Formato -> Color y fondo de pagina y Eliges la imágen.
Se abrirá una ventana como esta:
Aqui tienes muchas imágenes de fondo donde elegir. Bajalas a tu pc y subelas a tu servidor. Si no sabes cómo, lee la Lección 6
Recuerda!! La imágen debe estar en internet, no la busques con "Elegir archivo" porque sino, hará referencia a tu disco duro y no a la direccion de la imágen y nadie la podrá ver.
Nota: La imágen se repetirá hasta completar la página. Nunca pongas imágenes pesadas si no quieres que tarde horas en cargar.
Si quieres puedes cambiar los colores predeterminados de los enlaces, aunque no es recomendable ya que el todo el mundo está acostumbrado a los colores estandar.
En el ejemplo todos están de color azul, asi el enlace no cambiará de color luego de visitarlo.
El color de fondo es negro (aunque con la imágen de fondo no se verá) y cambie el color del texto por blanco.
Texto de enlace: Como se verán los enlaces (Recomendado azul)
Enlace activo: El color que muestra al mantener pulsado el enlace.
Enlace visitado: Es el color que vemos cuando ya hemos visitado el enlace.
Por medio de HTML
Cambiar color del fondo
Para cambiar el fondo, en vista HTML debes buscar el siguiente "Tag" <body>
Y le agregamos el atrivuto "bgcolor" que hace referencia al fondo, asi:
<body bgcolor="black"> Significa que tendrá ell fondo de color negro.
Se puede sustituir el nombre en inglés o con los valores hexadecimales. Aqui hay una tabla con el codigo de cada color. Debes poner el signo numeral (#) antes del codigo.
Ej: Para el color azul: <body bgcolor="#0000ff">
Poner Imágen de fondo
En el mismo body, pero ahora usamos el atrivuto: background
<body background="http://direccion_de_la_imfagen.gif">
Es recomendable usar imágenes de poco tamaño, Aquí hay una galería donde puedes elegir algúna. (La descargas y la subes a tu hosting. Si no sabes cómo, lee la Lección 6)
Color de los Enlaces
En la etiqueta body nuevamente. Solo agregamos otro atrivuto al lado del que ya usamos.
<body background="http://direccion_de_la_imagen.gif" link="blue" alink="yellow" vlink="#0000ff">
Donde link es el color del Enlace; alink el del Enlace activo (Cuando mantienes pulsado el enlace); y vlink es el Enlace visitado.
Suerte!
