
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>En la parte marcada con color amarillo verás unas opciones:
//<![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>
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





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.
ResponderEliminarGenial 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
Eliminaroooh... qué bonitas! esta decoración sí que me gusta, lo mismo me animo a ponerlas, por lo menos las probaré.
ResponderEliminarMuchísimas gracias, Potro, y también por elegir unas tan bonitas, tienes muy buen gusto, ;).
Un beso enorme
Pues si todos las ponen tendré que ponerlas yo también, no puedo quedarme atrás :D
EliminarBeso.
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!!!
ResponderEliminarMuchas gracias :)
EliminarHOla!
ResponderEliminarMe 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
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 :)
Eliminaracá estamos en Primavera, pero lo guardo para cuando empiece el otoño por estos lados.. Muy bueno!! Saludos
ResponderEliminarMe leíste la mente, iba a comentar presisamente eso xD
EliminarGenial Marcos :)
EliminarEnorabuena de nuevo por tus aportaciones
ResponderEliminargracias
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.
ResponderEliminargracias
Hola conchi, puedes dejar la pregunta en la entrada que más se asemeje al problema que tienes.
Eliminar¡Saludos!
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!!! =)
ResponderEliminarGracias Merlina, y a considerar usar otro navegador :)
EliminarBuen lunes.
MUY GENIALES PERO NECESITO AYUDA CON ESTO LES ENVIE UN MENSAJE EN FACEBOOK ESTE ES
ResponderEliminarHola 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
En Facebook no tengo ningún mensaje tuyo, pero si quieres te respondo aquí.
EliminarCopia 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.
GRACIAS POTRO ERES EL MEJOR MIL GRACIAS Y DISCULPA POR LAS MOLESTIAS :D
EliminarGracias lo probé
ResponderEliminarMuchas gracias! En cuanto pueda lo agrego a mi blog :)
ResponderEliminarQue todo salga bien :)
EliminarQue hermoso Potro! se ve súper lindo, gracias por compartirlo. :)
ResponderEliminar¿Verdad que sí? Igual a mí me ha encantado :)
EliminarMuy bueno ¡potro! no me interesa para usarlo pero me gusta el efecto :D
ResponderEliminarPotroooooo! 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
ResponderEliminarSaludos
Así diseñaron la imagen, supongo que con Photoshop:
Eliminarhttp://4.bp.blogspot.com/-n-sEN5dYQDc/UGkjImWMnuI/AAAAAAAAGrU/xLGLypXJMKM/s400/obsidianjla.png
Muy bueno todo tu contenido como de costumbre!
ResponderEliminarMe 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
Muchas gracias a ti :)
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarUsualmente estos scripts alentan un poco, aunque he entrado a tu blog dos veces y carga bastante bien.
Eliminar¡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!
ResponderEliminarQué gusto que haya sido de tu agrado :)
EliminarGracias me funciono al 100%
ResponderEliminarhola potro también las puse y quedo bien y para nada se te aido la creatividad ademas nos das ideas a los demas
ResponderEliminarhttp://zerezas-curiosidadesvarias.blogspot.com/
:)
EliminarGracias por vuestra ayuda, siguiendo vuestras instrucciones he conseguida hacer mi propio banner. Gracias
ResponderEliminarGracias a ti por tu visita!
EliminarMuy bueno Potro! :)))
ResponderEliminarOye 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
¡Genial! Qué gusto que haya quedado como querías :)
EliminarHola 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
ResponderEliminarSi no tenías un respaldo de la plantilla entonces sí Chuchi, tendrás que personalizar de nuevo tu plantilla :(
EliminarHola: Puse las hojas de otoño y quedaron preciosas.
ResponderEliminarMuchas gracias por lo bien que explicas las cosas y lo original que eres
Gracias a ti por tu amable comentario, ¡saludos!
EliminarGenial, ya he puesto las hojas en mi blog!! Me encantan estas ideas!! Un saludo.
ResponderEliminarMe alegro que te hayan gustado :)
Eliminarbuenas 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 :-(
ResponderEliminarHola, ¿cuál es exactamente el error que te da al poner este código?
EliminarEs 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¿En cuál blog lo has puesto Laura? porque debería aparecer en toda la pantalla.
Eliminar