Hojas de otoño cayendo en el blog

30 de septiembre de 2012 62 comentarios ,

Para los que vivimos en el hemisferio norte ya es otoño desde hace algunos días, y algunos me han preguntado por algún truquillo que haga caer hojas en el blog. Este script de MaxxBlade que aunque originalmente tiene otro fin, puede usarse para hacer que caigan imágenes de hojas en el blog, sin embargo, aunque en todos los navegadores que probé funcionó bien, es posible que en Internet Explorer no funcione, pero eso ya no nos extraña ¿verdad?

Un ejemplo se puede ver en este blog de pruebas.

Para poner estas hojas cayendo en el blog entra en la Edición HTML de la plantilla y antes de </head> pega lo siguiente:
<script>
//<![CDATA[
// Fall v2.0 By MaxxBlade - http://www.maxxblade.co.uk/fall
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}
var numObjs=15, waft=100, fallSpeed=5, wind=-1;

newObject("http://lh5.googleusercontent.com/--jcOdbfXsBs/UGS2U_spSLI/AAAAAAAADCU/G-4XZ0mSEHg/s100/hoja1.png",29,15);
newObject("http://lh5.googleusercontent.com/-aE24R5QmbE4/UGS2U_hZj0I/AAAAAAAADCM/7Hb18sy3qfo/s100/hoja2.png",27,23);
newObject("http://lh6.googleusercontent.com/-9H8JyoZ6j3g/UGS2U2aOamI/AAAAAAAADCQ/6zY7uKgyV2A/s100/hoja3.png",46,15);
newObject("https://lh3.googleusercontent.com/-OhuXMSqpELQ/UGS2Vq8Qf0I/AAAAAAAADCg/UTCK1YQUZqA/s100/hoja4.png",36,33);
function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:9;background:none;border:0;padding:0;box-shadow:none;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
window.onresize=winSize;fall();
//]]>
</script>
En la parte marcada con color amarillo verás unas opciones:
var numObjs=15, es la cantidad de hojas que aparecerán.
waft=100, es qué tantos pixeles se mueven a los lados cuando caen
fallSpeed=5, es la velocidad, y
wind=-1; es la dirección del viento, puede ser un valor negativo como está, 0 para que no tengan dirección, o un valor positivo (por ejemplo 1). Si es un valor negativo caerán a la izquierda, si es un valor positivo caerán a la derecha.

Con tan sólo eso tu blog tendrá una decoración muy acorde a esta temporada.

Autor | MaxxBlade



62 comentarios en:

" Hojas de otoño cayendo en el blog "

  1. A cada estacion, su toque especial de diseño. Yo ya decore la cabecera de mi blog REDEANDO el dia 21. Utilice 2 imagenes (una png y la otra gif), añadiendoles css con las propiedades position:absolute y z-index. Asi le dan un toque de movimiento y de profundidad, ya que tapan un poquito el logo y otros elementos no. Si quieres pasate y me dices que te parece, Potro. Suelo hacer estas cosas de vez en cuando, bien sea cambio de estacion, festividades o eventos. Asi cambio ligeramente el look del blog periodicamente para romper la monotonia y los usuarios y yo lo agradecemos visualmente.

    ResponderEliminar
    Respuestas
    1. Genial resultado. Recuerdo que antes yo también ponía decoraciones en el logotipo de acuerdo a la época o festividad, pero ya no me da tiempo además de que se me acabó la creatividad :P

      Eliminar
  2. oooh... qué bonitas! esta decoración sí que me gusta, lo mismo me animo a ponerlas, por lo menos las probaré.
    Muchísimas gracias, Potro, y también por elegir unas tan bonitas, tienes muy buen gusto, ;).
    Un beso enorme

    ResponderEliminar
    Respuestas
    1. Pues si todos las ponen tendré que ponerlas yo también, no puedo quedarme atrás :D
      Beso.

      Eliminar
  3. Me encanta tu blog, está muy bien hecho de verdad, yo tengo 1 llamado Five5 Girls Show!, y he aplicado muchas de tus técnicas. Porfaa visitadlo!!!

    ResponderEliminar
  4. HOla!
    Me gusta eso de dar un toque otoñal al blog, lo he puesto en practica y queda la mar de original. Me voy a aficionar a eso de lavarle la cara al blog cada temporada! Gracias y saludos

    ResponderEliminar
    Respuestas
    1. Bien :) En la categoría "Festividades" encontrarás más cosas como está por si de verdad te animas a darle un toque especial en cada temporada del año :)

      Eliminar
  5. acá estamos en Primavera, pero lo guardo para cuando empiece el otoño por estos lados.. Muy bueno!! Saludos

    ResponderEliminar
  6. Enorabuena de nuevo por tus aportaciones
    gracias

    ResponderEliminar
  7. Hola potro mi pregunta sería donde o en que apartado de Tú blog te pedría preguntar sobre un problema que me surge en una plantilla me serías de gran ayuda, pues el blog es para un colegio de infantil.

    gracias

    ResponderEliminar
    Respuestas
    1. Hola conchi, puedes dejar la pregunta en la entrada que más se asemeje al problema que tienes.
      ¡Saludos!

      Eliminar
  8. Hola, Potro!!! Odio IE ¬¬ no sé ve... me hubiera gustado ponerlo pero no lo veo... snif!! Muchas gracias de todos modos por el lindo detalle. Besito y ke tengas un excelente inicio de semana!!! =)

    ResponderEliminar
    Respuestas
    1. Gracias Merlina, y a considerar usar otro navegador :)
      Buen lunes.

      Eliminar
  9. MUY GENIALES PERO NECESITO AYUDA CON ESTO LES ENVIE UN MENSAJE EN FACEBOOK ESTE ES

    Hola Les quiero pedir ayuda en esto, no se como agregar un CSS3 O CSS quiero decir unos botones muy geniales y muy profesionales como estos agregarlos en uno de mis blogger con plantilla de facebook 2.0 mira aqui los botones:
    http://nicolasgallagher.com/lab/css3-facebook-buttons/#button

    Y estos otros botones tambien son muy geniales para tenerlos en blogger se verian expectaculares y muy geniales son estos:

    http://www.ajaxshake.com/es/JS/12781/botones.html

    Y quisiera agregarlos a mis blog:

    http://www.gtajuegopc.co.cc/
    http://palfacebookofficial.blogspot.com/
    http://motherofblogger.blogspot.com/

    Porfavor ayudame con eso para poder poner los botones

    ResponderEliminar
    Respuestas
    1. En Facebook no tengo ningún mensaje tuyo, pero si quieres te respondo aquí.
      Copia los estilos CSS y pégalos antes de ]]></b:skin>
      https://github.com/necolas/css3-facebook-buttons/blob/master/fb-buttons.css

      Luego, cuando quieras usar uno de esos botones usa este código:
      <a class="uibutton" href="URL del enlace">Button</a>
      <a class="uibutton confirm" href="URL del enlace">Button</a>
      <a class="uibutton special" href="URL del enlace">Button</a>

      El primero es el gris, el segundo es el azul y el tercero es el verde.

      Eliminar
    2. GRACIAS POTRO ERES EL MEJOR MIL GRACIAS Y DISCULPA POR LAS MOLESTIAS :D

      Eliminar
  10. Muchas gracias! En cuanto pueda lo agrego a mi blog :)

    ResponderEliminar
  11. Que hermoso Potro! se ve súper lindo, gracias por compartirlo. :)

    ResponderEliminar
    Respuestas
    1. ¿Verdad que sí? Igual a mí me ha encantado :)

      Eliminar
  12. Muy bueno ¡potro! no me interesa para usarlo pero me gusta el efecto :D

    ResponderEliminar
  13. Potroooooo! Hace tiempo que no paso por aquí :D Tienes idea de como se hace el efecto de volumen y reflejo en las imágenes? Así como aquí ? http://glitterintheairamm.blogspot.com.ar/2012/10/6to-sorteo-2do-aniversario-lux.html#more
    Saludos

    ResponderEliminar
    Respuestas
    1. Así diseñaron la imagen, supongo que con Photoshop:
      http://4.bp.blogspot.com/-n-sEN5dYQDc/UGkjImWMnuI/AAAAAAAAGrU/xLGLypXJMKM/s400/obsidianjla.png

      Eliminar
  14. Muy bueno todo tu contenido como de costumbre!

    Me ha servido mucho para el nuevo blog que acabo de abrir, se llama salud365 y bueno pues en apenas 3 o 4 días ya ha crecido bastante.
    Pásate si lo deseas y dime alguna objeción.

    Muchas grascias por la valiosa información que prestas

    ResponderEliminar
  15. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Usualmente estos scripts alentan un poco, aunque he entrado a tu blog dos veces y carga bastante bien.

      Eliminar
  16. ¡Awww! Estaba buscando desde hacía varios días algo así y como siempre, es aquí donde encuentro la solución a mis problemas. ¡Me gustó muchísimo cómo quedó! Gracias :3!

    ResponderEliminar
  17. hola potro también las puse y quedo bien y para nada se te aido la creatividad ademas nos das ideas a los demas
    http://zerezas-curiosidadesvarias.blogspot.com/

    ResponderEliminar
  18. Gracias por vuestra ayuda, siguiendo vuestras instrucciones he conseguida hacer mi propio banner. Gracias

    ResponderEliminar
  19. Muy bueno Potro! :)))
    Oye he acabado mi blog y te queria dar las gracias por toda tu ayuda que para mi a sido mucho :) mira: http://gold-tm.com/
    Ahora queda actualizarlo regularmente y desarollarlo mas :)
    A y ademas pronto te voy a donar unos dolares por la ayuda :) Gracias.
    Blogwalking: http://gold-tm.com/ by Admin

    ResponderEliminar
    Respuestas
    1. ¡Genial! Qué gusto que haya quedado como querías :)

      Eliminar
  20. Hola Potro!! quiero comentarte que yo tenia un hermoso blog y se me ocurrio poner las vistas dinamicas y toque aca y alla y termine cambiando la plantilla y ya no pude regresar al original. Supongo que me jo...y ahora tengo q descargar la plantilla basica, poner el truco de leer mas y esas cosas de nuevo....verdad? Me puedes apoyar porque yo no entiendo nada de esto... GRACIAS CHUCHI

    ResponderEliminar
    Respuestas
    1. Si no tenías un respaldo de la plantilla entonces sí Chuchi, tendrás que personalizar de nuevo tu plantilla :(

      Eliminar
  21. Hola: Puse las hojas de otoño y quedaron preciosas.
    Muchas gracias por lo bien que explicas las cosas y lo original que eres

    ResponderEliminar
    Respuestas
    1. Gracias a ti por tu amable comentario, ¡saludos!

      Eliminar
  22. Genial, ya he puesto las hojas en mi blog!! Me encantan estas ideas!! Un saludo.

    ResponderEliminar
  23. buenas noches desde de venezuela tengo un blog y he intentado colocar algunos de tus efectos por ejemplo el de hojas de otoño cayendo y la verdad que llevo como 2 meses de intentos frustrados, no me ha salido ninguno siempre me sale problema en la plantilla el artilugio no funciona o algo asi, estoy empezando a creer que soy un poco obtuso para esto de la edicion html, solo una vez pude colocar el de aumentar el tamaño del titulo de la cabecera y no se ni como, si es de tu gusto puedes visitar mi blog, gracias :-(

    ResponderEliminar
    Respuestas
    1. Hola, ¿cuál es exactamente el error que te da al poner este código?

      Eliminar
  24. Es muy bonito el efecto, pero como se puede poner par que caigan por todo la pantalla y no solo por la cabecera del blog?

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog lo has puesto Laura? porque debería aparecer en toda la pantalla.

      Eliminar
  25. no se como descargarlo en la web Master de mi cole. en que apartado tengo que descargarlo?

    ResponderEliminar
  26. no puedo descargarlo en la web master de mi cole. no se donde instalarlo

    ResponderEliminar
    Respuestas
    1. Hola Lurdes, no hay que descargar nada, sólo pegarlo en tu blog donde se indica.

      Eliminar
  27. Hola Potro me encanta tu blog, es genial. Quería saber es que soy muy nueva en esto, cuando acabe el otoño como quito ese efecto.
    Gracias

    ResponderEliminar
  28. Hola Potro, me gusta un monton tu blog. Yo soy muy novata en esto y quería saber cuando pase el otoño, como quito ese efecto.

    ResponderEliminar
    Respuestas
    1. Hola Marivi, cuando lo quieras quitar sólo mira el código de esta entrada, búscalo en tu plantilla y elimínalo.

      Eliminar
  29. Hola Potro, ¿habría alguna manera de hacer que el script funcionase en todo el blog en vez de solo en la cabecera?
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Debería funcionar en todo el blog de hecho...

      Eliminar
  30. Ayuda con urgencia esto no me funciona desaparecen luego de pasar por el banner, no caen en todo el blog.

    ¿Qué puedo hacer para que caigan en todo el blog y no sólo la cabecera?

    Ya coloque el código después de body y sigue igual.

    Espero una respuesta pronto.

    Saludos!!!

    ResponderEliminar
    Respuestas
    1. El efecto abarca toda la parte visible de la pantalla, nada más.
      Saludos.

      Eliminar
  31. Hola El Potro, es la primeva vez que te pregunto. se podria modificar este codigo para que las hojas o otras imagenes suban para arriba en vez de caer? Espero tu Pronta Respuesta.

    Saludos y Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Daniel. Busca esta parte del código:

      with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}

      Y cambia ese top por bottom

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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