Fondo del blog en movimiento tipo 'Disco'

2 de abril de 2011 86 comentarios ,
Hace poco veíamos cómo poner el fondo del blog en movimiento al estilo groovy, ahora veremos cómo ponerle movimiento con unas luces de colores al estilo Disco de los 70s que están siempre en movimiento.

Puedes ver un ejemplo en este blog de pruebas.

El procedimiento es muy sencillo sólo basta insertar un script en el blog, para ello vamos a Diseño | Edición de HTML y antes de </body> pegamos lo siguiente:
<script type='text/javascript'>
// <![CDATA[
var colsel=new Array('#E80F02', '#DB52EE', '#45E350', '#E7E61A', '#0B82DE', '#D7DF01');
var speed=100;

/*
Blob space Graphic Effect
(c)2010 mf2fm web-design
http://www.mf2fm.com/rv
DON'T EDIT BELOW THIS BOX
*/

window.onload=whizzy;
var div;
var ring=new Array();
var swide=screen.width;
var shigh=screen.height;
var count=0;
var roun=0;
var nour=0;
function whizzy() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='50%';
dvs.top='50%';
dvs.width='1px';
dvs.height='1px';
dvs.overflow='visible';
dvs.zIndex='-1';
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.insertBefore(div, document.body.firstChild);
for (i=0; i<30; i++) ring['col'+i]=new Array();
add_blobs();
zoomer();
}

function add_blobs() {
var f, h, i, j, k, w;
for (i=50; i<swide*1.5;) {
f=Math.floor(10+140*(i/swide)); // De 10 a 150
ring['row'+count]=new Array();
for (j=0; j<30; j++) {
h=-f/8+i/2*Math.cos(Math.PI*j/15);
w=f/5+i/2*Math.sin(Math.PI*j/15);
if (h-f/2>shigh/2 || h+f/2<-shigh/2 || w-f/2>swide/2 || w+f/2<-swide/2) continue;
k=document.createElement('div');
dvs=k.style;
dvs.position='absolute';
dvs.left=w-f/2+'px';
dvs.top=h-f/2+'px';
dvs.color=colsel[colsel.length-1];
k.appendChild(document.createTextNode(String.fromCharCode(9679)));
k.style.fontSize=f+'px';
ring['row'+count][j]=k;
ring['col'+j][count]=k;
div.appendChild(k);
}
count++;
i+=f*2;
}
nour=count;
}

function zoomer() {
for (var i=0; i<30; i++) {
var tc=Math.abs(-nour+roun)%(count-2);
if (tc<colsel.length && ring['col'+i][roun]) ring['col'+i][roun].style.color=colsel[tc];
}
if (++roun==count) {
roun=0;
nour++;
setTimeout('zoomer()', speed);
}
else zoomer();
}
// ]]>
</script>
Al inicio del código, en var colsel están los códigos de los colores de las luces, puedes agregar tantos colores como quieras, sólo ten en cuenta que el último color siempre será el color de las luces que se ve en forma pausada.

En var speed podemos controlar la velocidad del efecto, con un número menor se verá más rápido.

Lo he probado en Safari, Opera, Firefox, Chrome e Internet Explorer y en todos funciona, sin embargo en Firefox los círculos se ven más pegados.
Y ahora sí, ¡a sacar los pantalones acampanados!


86 comentarios en:

" Fondo del blog en movimiento tipo 'Disco' "

  1. ¡menudo efectazo! Perfect!!! Me lo coloco en el aniversario del blog, ¡molará mucho!!!! :P
    Gracias por este increible fondo! :)

    ResponderEliminar
  2. We Game / Emilio, ándale, para un aniversario queda de lujo!

    Obe, ¿verdad que sí? :)

    ResponderEliminar
  3. Tengo una preguntita....
    Lo de la música es por la imagen de "Discos Stu" o del propio fondo?
    Porque es rara.... jijiji

    ResponderEliminar
  4. Guau!! Potro, este fondo está genial, buen aporte... gracias

    ResponderEliminar
  5. Miss Varieté, jajaja, no, el script no trae la música incluida, esa fue patrocinada por Discos Stu :D

    MaG@S RaDioMuSiC, a ti por tu visita :)

    ResponderEliminar
  6. :( no escuche la musiquita a de etar buena ... jajajaja muy buen efecto Potro me gusta, uff pero tendre que controlarme para que mi blog no se alente con tanto efecto

    ResponderEliminar
  7. Lo sé, esto de los efectos en el blog es como salir de compras :D

    ResponderEliminar
  8. Hola Potro :D muy buenas noches, Tengo una duda, no tiene nada q ver con este tema pero me atrevi a hacertela aqui,

    Qusiera saber como poner la cabezera de mi blog mas arriba?

    Me Explico Mas: el blog tiene un espacio arriba y quisiera saber como ago q no quede espacio arriba solo la cabezera pegando de lo mas alto del blog.

    Imagen de Muestra!
    http://dl.dropbox.com/u/8944635/CiudadBlogger%202.PNG


    El area Roja representa el espacio al que me Refiero

    ResponderEliminar
  9. Muy bueno!!interesante debo decir jaja! por cierto potro necesito otra ayudita si no es molestia jeje.. sabes como podria centrar la cabecera de mi blog?...

    http://otakus-mexicanos.blogspot.com/

    muchos saludos, me encata la pag!

    ResponderEliminar
  10. potro , para poner los colores , me das un ejemplo por favor!

    ResponderEliminar
  11. ๖ۣۜÇΣZΛЯۣ™ (CESAR JERICHO), ammm... ¿y en cuál blog?


    lizeth-, prueba agregando antes de ]]></b:skin> esto:
    .Header img {text-align:center;}


    free, aquí están los códigos de los colores.

    ResponderEliminar
  12. Bueno mi blog es wweonlive.com y me gustaria que me dijeras como pego la cabecera del blog a la parte de arriba sin que quede espacio.

    http://dl.dropbox.com/u/8944635/CiudadBlogger%202.PNG

    ResponderEliminar
  13. q onda potro esta chido, solo me preguntaba si tienes la receta para poner el slideshow que tienes en este blog:= http://ciudadblogger-glider.blogspot.com/ .
    otra pregunta.¿las entradas mas recientes se ponen en automatico??
    graciotas carnal.

    ResponderEliminar
  14. ๖ۣۜÇΣZΛЯۣ™ (CESAR JERICHO,

    Busca esta parte de tu plantilla:
    #outer-wrapper {

    Dentro de ella verás esto:
    margin:0 auto;

    Cambia ese 0 (cero) por -35px y listo.

    ResponderEliminar
  15. FREDDY,

    En esta entrada puedes ver cómo se hace, pero la verdad es que no funciona en muchas plantillas, te recomiendo que uses algún otro, usando el buscador de aquí podrás encontrar otras opciones de slider.

    Y no, ni con ese ni con otro slider se pueden poner de forma automática las entradas más recientes pero ya mismo estoy probando uno, si todo sale bien lo publico esta semana ;)

    ResponderEliminar
  16. hola potro!! ya lo hice y no me funciono... otra opcion?

    http://otakus-mexicanos.blogspot.com/

    ResponderEliminar
  17. potro! ya le he arregaldo jeje.. muchas gracias de todas maneras!

    saludos!

    ResponderEliminar
  18. buen efecto y la combinacion -imagenes-musica-fondo

    me quede a escuchar la cancion tambien

    ResponderEliminar
  19. Por mas que intento no consigo ponerlo lo pongo delante de lo que dices y nada me sale letras rojas

    ResponderEliminar
  20. Hola Potro como estas?
    Te queria preguntar si sabes como se hace esto: en el sitio www.planetavelez.com.ar hecho en wordpress en el primer gadget de la derecha dice TWITTER/VIDEO/RECENT, osea que en un gadget se pueden ver tres elementos distintos...
    Si sabes alguna forma de hacer esto, o algo parecido decime...
    Saludos!

    ResponderEliminar
  21. lizeth-, qué bueno que ya lo has resuelto :)

    PeliculasTube, buena ¿no? Todo un clásico :)

    VARRO, pues no veo que lo tengas puesto en el blog de tu perfil.

    Coloush +16, no tengo un post sobre ello, pero busca en Google 'tabview blogger' y encontrarás varios tutoriales sobre ello, aunque la mayoría están en inglés.

    ResponderEliminar
  22. gracias potro!!!
    me puse a buscar y encontre esto mira:
    http://www.bloggertipandtrick.net/2010/09/17-top-jquery-featured-content-sliders.html
    estan buenos, pero el unico q pude implementar fue:
    Featured Content Slider Using jQuery UI
    de los q mas me gustaron!!
    quieres q te pase como se instala??

    ResponderEliminar
  23. por cierto lo puedes ver aqui
    http://itzacatepec-ieee.blogspot.com/

    ResponderEliminar
  24. ¡Qué divertido! Te mejoras cada día.

    ResponderEliminar
  25. Excelente el truco, potro. Gracias nuevamente

    ResponderEliminar
  26. FREDDY, gracias pero no es necesario, mira.

    m.p.moreno, esa era la idea, tener una opción para divertirnos un rato en el blog :)

    Carlos Santos, a ti por tu visita!

    ResponderEliminar
  27. potro 2 preguntitas.. 1 porque no aparecen ninguna de mis entradas cuando se las busca en google? solo aparece la pagina cuando la buscas... y 2- como pones google busqueda personalizada dentro del cuadro de busqueda? un saludo y gracias..

    ResponderEliminar
  28. Porque aún no está bien posicionado tu blog, eso sucede con el tiempo.
    El buscador que uso es este:
    http://ciudadblogger.com/2009/11/motor-de-busqueda-personalizada-de.html

    ResponderEliminar
  29. Hola Potro.
    Éste es my style!! Impresionante ;)
    Me gustaría que me dijeras donde colocar la condicional para ponerlo en una estática con música incluída... este fondo lo meto con calzador si hace falta.
    Gracias mil, eres el namber wan.
    Un saludo.

    ResponderEliminar
  30. Hola Tapestryworkerman,

    Sólo necesitas encerrar el código del script con la condicional que necesites:
    http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

    La música la puedes poner directo dentro de la página estática que desees.
    ¡Saludos!

    ResponderEliminar
  31. como se pone este efecto sólo en una página estática??

    ResponderEliminar
  32. Mira el comentario anterior al tuyo.

    ResponderEliminar
  33. uh del potro a mi no me anda!
    me dice esto.
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "script" must be terminated by the matching end-tag "".


    me ayudas.

    ResponderEliminar
  34. Hola free,

    Le faltaba una parte al código que tenía en la entrada y nadie me lo dijo :(
    Ya lo he arreglado, copia y pega de nuevo ;)

    Saludos.

    ResponderEliminar
  35. jajaja. pense que era todo culpa mia. ya que no me salia!

    ResponderEliminar
  36. te hago una pregunta potro.
    abria un truco para poner una intro en el blog?

    ResponderEliminar
  37. Pues hay varios métodos, yo por ahora no tengo ninguno pero en Oloblogger me parece que tienen dos.

    ResponderEliminar
  38. potro una pregunta, como puedo hacer que los visitantes de mi blog puedan descargar archivos, por ejemplo : mp3, imagenes... etc.

    ResponderEliminar
  39. Mete el archivo que quieres poner para descargar dentro de un comprimido ZIP o RAR. Luego sube ese archivo a un hosting y en el blog pon el enlace a ese archivo.

    ResponderEliminar
  40. gracias.
    sera que sos pariente de martin del potro , jeje
    gran tenista argentino.!
    mentira un abraso potro!

    ResponderEliminar
  41. Como hago para sacar el efecto?

    ResponderEliminar
  42. Busca el código que se menciona en la entrada y elimínalo.

    ResponderEliminar
  43. No es una página aparte, es una página del mismo blog sólo que he usado códigos condicionales para ocultar elementos en esa parte del blog.

    ResponderEliminar
  44. Por fin fin encontre alguien que sepas .Eres un crakkkkkkkkkkkkkk,me serviras de muchas ayuda.

    Un saludo bavette.

    ResponderEliminar
  45. Hola Potro me puedes decir como cambiar el fondo del efecto a diferente color. por ejemplo de negro a blanco.
    Saludos.

    ResponderEliminar
  46. Hola lalocom, ahí en la entrada se explica dónde se cambia el color de las luces. Saludos.

    ResponderEliminar
  47. Gracias por la rapida respuesta Potro, pero lo que quiero cambiar es el fondo no las luces. Por ejemplo cuando pegue el codigo a mi me sale fondo blanco y tu blog de pruebas lo tienes en negro
    Gracias.

    ResponderEliminar
  48. No tiene color de fondo, en realidad es transparente y se adapta al fondo que tengas en el blog. Yo en ese ejemplo el fondo es negro y por eso se ve así, si tu plantilla fuera igual de fondo negro también se verá así. Por lo tanto sólo cambia el color de fondo de tu plantilla al color que quieras ;)
    Saludos.

    ResponderEliminar
  49. Hola Pronto Muy Bueno El Post Pero tengo una pregunta como hago para que el fondo se vea en negro (como el blog de prueba) por que en mi blog aparece en blanco el fondo con las luces... y ps el fondo blanco mo me sirve ya que las letras están en ese color y no se alcanzan a leer... otra pregunta que no tiene que ver con este tema..
    pero me podrias decir como hago para que cuando le den like a una entrada en mi blog (para facebook) en ves de esto:

    "wwwdisneyandnick.blogspot.com
    var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym.."

    que sale actualmente salga una breve descripción de lo que se trata la publicación o el encabezado de la misma?
    gracias
    Mi blog es: http://wwwdisneyandnick.blogspot.com

    ResponderEliminar
  50. Hola bayron,

    Quitando el script de la fecha deberá de dejar de salir ese texto, aunque el cambio quizá no se note de inmediato.

    El script de esta entrada no tiene un color de fondo determinado, mas bien toma el color de fondo que tenga tu blog.

    Saludos.

    ResponderEliminar
  51. Potro, este fondo de luces se ve solo en la mitad de mi blog porque :/, el blog es este:

    http://www.SomosRecordando.blogspot.com

    ResponderEliminar
  52. No veo que tengas el código en ese blog :/

    ResponderEliminar
  53. Hola Potro.
    Se acerca el primer aniversario de La Sinapsis y quiero poner el efecto disco, la duda es que no escucho la música que recuerdo haber escuchado en su día y no encuentro nada que la muestre en el código (ningún mp3, por ejemplo.
    Supongo que podré editar el contenido escrito del recuadro, no?.
    Espero contestación ya que me quedan 16 días para el "cumpleaño" del blog, ya me contarás.
    Un saludo.

    ResponderEliminar
  54. Hola Tapestryworkerman,

    ¡Enhorabuena por el primer aniversario, que vengan muchos más!
    Qué bueno que me avisaste lo de la música, lo que sucedió es que el usuario eliminó su cuenta y por eso ya no se escuchaba aquí, pero ya lo he corregido.
    Lo que yo he hecho es poner un video de YouTube en la entrada, y para que no se vea sino que sólo se escuche, he modificado los valores de ancho y alto del reproductor a cero, de esa forma no es visible, pero sigue funcionando y se escucha.

    Saludos.

    ResponderEliminar
  55. Gracias por tus congratulations!
    Ahora que ya tienes solucionado el audio... no creas que te dejo tranquilo ;)
    ¿Se podría cambiar el color de fondo del recuadro?: cambiar el blanco por azul y, ya puestos, cambiar la imagen.
    Gracias por todo Potro.
    Un saludo.

    ResponderEliminar
  56. Ammm, ya me perdí un poco. ¿Cuál recuadro blanco quieres cambiar por una imagen?

    ResponderEliminar
  57. ... UPS!! ya perdonarás, me hice a la idea de que se trataba de una "portada" antes de entrar al blog. En vez de una barra de progreso de carga (por ejemplo), el visitante se encontraba con la portada disco para luego acceder a la página.
    He colocado el código y he salido de dudas... :O
    Gracias por tu paciencia, ahora a ver si encuentro un mp3 acorde al "wateke".
    Un saludo Potro.

    ResponderEliminar
  58. Seguro encontrarás el tema adecuado :)
    Saludos.

    ResponderEliminar
  59. Hola, muy buena tu página felicitaciones!. Es primera vez que escribo y mi pregunta es: ¿se le puede eliminar la música a éste gadget?, pues en mi blog tengo incorporada mi radio. Desde ya agradezco tu respuesta, saludos desde Temuco, Chile. Aquí el link de mi blog: http://apocalipsis80s.blogspot.com/

    ResponderEliminar
  60. ¡Bienvenido a Ciudad Blogger, RETROMUSIC ON LINE!
    El gadget no tiene música, yo le he puesto un reproductor sólo para ambientar el demo, pero cuando tú lo pongas no escucharás nada extra de lo que tú tengas en tu blog.

    Saludos.

    ResponderEliminar
  61. Hola Potro!!
    La de tiempos que llevaba esperando este momento!!:D
    No he podido aguantar más y me he adelantado unos días... ya tengo el fondo y la música.
    Pásate, si quieres, y echa un vistazo, a mí me gusta una barbaridad.
    Me estoy pensando en cambiar la banda sonora de la página periódicamente, a lo que me surge una duda:
    ¿Podría hacerse de forma automática?, sin cambiar el reproductor, ya que éste, el público puede pararlo a su antojo y estéticamente es lo que quiero.
    Gracias por todo Potro.
    Un saludo.

    ResponderEliminar
  62. ¡Te ganó la tentación!
    Me temo que no, si quieres que sea una única canción cada determinado tiempo tendrás que hacerlo manualmente. Como se trata de un reproductor sólo puedes o poner una canción, o poner varias canciones de forma continua.

    Saludos.

    ResponderEliminar
  63. Ok.
    Ahora otra duda, ¿podría salir este fondo sólo cuando se entrara en una entrada en concreto?. Supongo que tirando de condicionales,podría reproducirse un tema musical en concreto al entrar en dicha entrada.
    La idea es que se vean las luces disco y esa música sólo cuando se entre en la entrada en cuestión y el blog siga igual.
    Ya contarás.
    Un saludo.

    ResponderEliminar
  64. Claro, como dices, usando las condicionales puedes hacer que el script se ejecute en la entrada que elijas, y el reproductor que esté oculto en todas partes menos en la entrada que quieres:

    http://ciudadblogger.com/2010/03/condicionales-de-blogger.html
    http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

    ResponderEliminar
  65. Gracias Potro por responderme!, y de nuevo felicitaciones, ojalá muchos más tuvieran tu disposición y voluntad para enseñarnos. Saludos!

    ResponderEliminar
  66. Gracias Potro.
    Siguiendo tus consejos, ya tengo puestas unas cuantas condicionales, pero aún no había "personalizado" ningún fondo y tenía mis dudas. Así que, en breves, toquetearé códigos... a ver si lo consigo sin armar estropicios :)
    Ups!, repasando los comentarios me he dado cuenta de que te pregunté lo mismo hace un tiempo, ya perdonarás.
    Un saludo y gracias de nuevo.

    ResponderEliminar
  67. RETROMUSIC ON LINE, gracias a ti por tu visita!

    Tapestryworkerman, suele pasar, yo igual tuve un vago recuerdo pero no estaba seguro ;)

    ResponderEliminar
  68. No me sale Potro, no se por que.. hice todo TAL cual dice ahi pero no hay chances!
    Probe tambien con otro efecto,el de las barras que se dispersan,pero tampoco me salio. Me dice que esta todo bien, que se pudo aplicar,pero cuando abro el blog NADA!. Me ayudass por favoor?? Gracias!

    ResponderEliminar
  69. Algún otro script no debe dejar funcionar a este o el otro, tal vez sea el del cursor :/

    ResponderEliminar
  70. Pero tengo dos cursores juntos yo...Si borro uno voy a poder o tengo que borrar los dos?

    ResponderEliminar
  71. Sólo probando podrás saberlo. Intenta primero con el del texto que sigue al cursor, elimínalo, si eso te permite que este script funciona sabrás que era a causa de ese, sino elimina el otro. Si eliminando ambos tampoco funciona entonces debe haber algún otro script que es el que causa que no funcione este.

    ResponderEliminar
  72. Hola Potro, Primero Tus tutos son geniales.
    Segundo, Mira yo en el fondo del blog tengo una imagen del pasto del futbol, tu sabrias como hacerle un efecto como si se moviera?
    Gracias y sigue con tus tutoriales :D

    ResponderEliminar
    Respuestas
    1. No XXLeanXX, no conozco algún método que lo haga :S

      Eliminar
  73. este efecto se puede utilizar en un intro para un blog?

    ResponderEliminar
    Respuestas
    1. No, es sólo para las páginas del blog.

      Eliminar
  74. Hola Potro, haces una labor excelente. Una preguntita, estos fondos animados no hacen que se ralentice la página para los visitantes? un saludo.

    ResponderEliminar
    Respuestas
    1. Desafortunadamente sí, por eso conviene usarlo sólo en "ocasiones especiales".
      Gracias por tu comentario!

      Eliminar
  75. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Edson, sólo tienes que eliminar el background que está dentro de body {

      Pd. He eliminado el comentario por el aviso que está al final.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger