El Escaparate: Navidad

Estás en: Inicio » Etiqueta: Navidad

Guirnalda navideña de luces intermitentes

En entradas anteriores vimos como incluir un efecto de nieve en el blog usando varios sistemas:

->Nieve usando la etiqueta marquee.
->Nieve usando un script externo.
->Nieve que se va acumulando al final de la página.

En esta entrada vamos a utilizar un script que solo tendremos que copiar y pegar -desde Diseño- en un gadget HTML/Javascript.
Mucho mejor si después de añadir el gadget lo movemos al pie del blog, nos será más fácil así el localizarlo después para retirar la "nieve".

El script utiliza una imagen "copo de nieve", pero podrá cambiarse fácilmente por una estrellita, una bolita de árbol de Navidad... cualquier icono apropiado para estas fechas.

Código:

<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

var numberOfSnows = 20;
var snowSpeed = 0.9;
var inTheFace = 5;
var setTimeOutSpeed = 50;

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";
for (i = 0; i < numberOfSnows; i++){
document.write('<div id="snows'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKiuySuWtEpX4yaT80n7MiOc8cv38w2YSjcR7uLMiajjPkmdnTrmTm6SGZVrym5W5xVn7bYr6zqIl-661BGOd1e3HP5X-tcnpwRCmZNBoM11ioBYuVMR2CaxH-jHUZeZelf0BgfsNw1E8/s320/snow2.gif" class="snow" width="20"/></div>');
}
if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}
function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);
oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);
iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
field = (h > w)?h:w;
}
function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = snowSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}
function animate(){
for (i = 0; i < numberOfSnows; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}
function init(){
win();
for (i = 0; i < numberOfSnows; i++){
strs[i] = document.getElementById("snows"+(idx+i)).style;
rst(i);
}
animate();
}
if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
<style>
.snow {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
html {
overflow-x:hidden;
}
</style>

Configuración:

-> var numberOfSnows = 20; Cambiamos aquí el valor para mostrar mayor o menor número de copos.
-> var snowSpeed = 0.9; Valor que controla la velocidad de desplazamiento de los copos.
-> var setTimeOutSpeed = 50; Valor que controla la velocidad de aparición de los copos.
-> En esta línea del script, podemos sustituir la url de la imagen por la que vamos a utilizar en nuestro caso y controlar su tamaño (width="20"):
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip1PEKOr6xlMe2DPgH9gZxd_Z2-iFWNd7jKPnR5wR9HCOE8uEIzQj8hzm5SUMyqpFdboKpw6vMdc6nWAGsP2u5JSk-NRy88KWOS3yOGZnldRkZwgj_RRcbbWAqAaQrLcxtKfy0x9tkjWpb/s320/snow4.gif" class="snow" width="20"/>

Nota:

En las plantillas del Diseñador de Blogger, funciona mal o directamente no funciona.

VER EJEMPLO:Estrellas de nieve

[+/-]

Nieve que se acumula al final de la página

En una entrada anterior habíamos visto como conseguir un efecto de nieve en el blog mediante el uso de la etiqueta "marquee" y poco después veíamos como incluir el efecto nieve usando un script.

En esta ocasión vamos a ver de nuevo como incluir nieve en el blog mediante el uso de un script. El script irá incluido directamente en la plantilla y lo he "marcado" para que, una vez pasadas las fiestas, sea fácil su localización para retirarlo.

Este script consigue un efecto muy lindo, ya que los copos que van cayendo quedan acumulados al final de la página y mientras unos caen, los del pie de la página se van deshaciendo poco a poco...
Además si movemos el ratón por la pagina, los copos cambian de dirección como movidos por un ligero viento.

Antes de decidir si vais a usarlo o no, podéis ver una demostración online en un blog donde también e incluido el script para copiar.

Lo único que hemos de hacer para conseguir el efecto nieve, es copiar el script y colocarlo en el código de nuestra plantilla antes de </head>

<script type="text/javascript">
//<![CDATA[

/*
DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------

Initializes after body onload() by default (via addEventHandler() call at bottom.)
To customize properties, edit below or override configuration after this script
has run (but before body.onload), eg. snowStorm.snowStick = false;

*/

var snowStorm = null;

function SnowStorm() {

// --- PROPERTIES ---

this.flakesMax = 150; // Limit total amount of snow made (falling + sticking)
this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)
this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
this.followMouse = true; // Snow will change movement with the user's mouse
this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.
this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

// --- less-used bits ---

this.flakeLeftOffset = 0; // amount to subtract from edges of container
this.flakeRightOffset = 0; // amount to subtract from edges of container
this.flakeWidth = 8; // max pixel width for snow element
this.flakeHeight = 8; // max pixel height for snow element
this.vMaxX = 5; // Maximum X velocity range for snow
this.vMaxY = 4; // Maximum Y velocity range
this.zIndex = 0; // CSS stacking order applied to each snowflake

// --- End of user section ---

// jslint global declarations
/*global window, document, navigator, clearInterval, setInterval */

var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.addEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.attachEvent('on'+evtName,evtHandler);
});

var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.removeEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.detachEvent('on'+evtName,evtHandler);
});

function rnd(n,min) {
if (isNaN(min)) {
min = 0;
}
return (Math.random()*n)+min;
}

function plusMinus(n) {
return (parseInt(rnd(2),10)==1?n*-1:n);
}

var s = this;
var storm = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.active = false;

var isIE = navigator.userAgent.match(/msie/i);
var isIE6 = navigator.userAgent.match(/msie 6/i);
var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
var isWin9X = navigator.appVersion.match(/windows 98/i);
var isiPhone = navigator.userAgent.match(/iphone/i);
var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
var screenX = null;
var screenX2 = null;
var screenY = null;
var scrollY = null;
var vRndX = null;
var vRndY = null;
var windOffset = 1;
var windMultiplier = 2;
var flakeTypes = 6;
var fixedForEverything = false;
var opacitySupported = (function(){
try {
document.createElement('div').style.opacity = '0.5';
} catch (e) {
return false;
}
return true;
})();
var docFrag = document.createDocumentFragment();
if (s.flakeLeftOffset === null) {
s.flakeLeftOffset = 0;
}
if (s.flakeRightOffset === null) {
s.flakeRightOffset = 0;
}

this.meltFrameCount = 20;
this.meltFrames = [];
for (var i=0; i<this.meltFrameCount; i++) {
this.meltFrames.push(1-(i/this.meltFrameCount));
}

this.randomizeWind = function() {
vRndX = plusMinus(rnd(s.vMaxX,0.2));
vRndY = rnd(s.vMaxY,0.2);
if (this.flakes) {
for (var i=0; i<this.flakes.length; i++) {
if (this.flakes[i].active) {
this.flakes[i].setVelocities();
}
}
}
};

this.scrollHandler = function() {
// "attach" snowflakes to bottom of window if no absolute bottom value was given
scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
if (isNaN(scrollY)) {
scrollY = 0; // Netscape 6 scroll fix
}
if (!fixedForEverything && !s.flakeBottom && s.flakes) {
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active === 0) {
s.flakes[i].stick();
}
}
}
};

this.resizeHandler = function() {
if (window.innerWidth || window.innerHeight) {
screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
} else {
screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
}
screenX2 = parseInt(screenX/2,10);
};

this.resizeHandlerAlt = function() {
screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
screenX2 = parseInt(screenX/2,10);
};

this.freeze = function() {
// pause animation
if (!s.disabled) {
s.disabled = 1;
} else {
return false;
}
for (var i=s.timers.length; i--;) {
clearInterval(s.timers[i]);
}
};

this.resume = function() {
if (s.disabled) {
s.disabled = 0;
} else {
return false;
}
s.timerInit();
};

this.toggleSnow = function() {
if (!s.flakes.length) {
// first run
s.start();
} else {
s.active = !s.active;
if (s.active) {
s.show();
s.resume();
} else {
s.stop();
s.freeze();
}
}
};

this.stop = function() {
this.freeze();
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'none';
}
removeEvent(window,'scroll',s.scrollHandler);
removeEvent(window,'resize',s.resizeHandler);
if (!isOldIE) {
removeEvent(window,'blur',s.freeze);
removeEvent(window,'focus',s.resume);
}
};

this.show = function() {
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'block';
}
};

this.SnowFlake = function(parent,type,x,y) {
var s = this;
var storm = parent;
this.type = type;
this.x = x||parseInt(rnd(screenX-20),10);
this.y = (!isNaN(y)?y:-rnd(screenY)-12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
this.vAmp = this.vAmpTypes[this.type];
this.melting = false;
this.meltFrameCount = storm.meltFrameCount;
this.meltFrames = storm.meltFrames;
this.meltFrame = 0;
this.twinkleFrame = 0;
this.active = 1;
this.fontSize = (10+(this.type/5)*10);
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
docFrag.appendChild(this.o);

this.refresh = function() {
if (isNaN(s.x) || isNaN(s.y)) {
// safety check
return false;
}
s.o.style.left = s.x+'px';
s.o.style.top = s.y+'px';
};

this.stick = function() {
if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
} else if (storm.flakeBottom) {
s.o.style.top = storm.flakeBottom+'px';
} else {
s.o.style.display = 'none';
s.o.style.top = 'auto';
s.o.style.bottom = '0px';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
};

this.vCheck = function() {
if (s.vX>=0 && s.vX<0.2) {
s.vX = 0.2;
} else if (s.vX<0 && s.vX>-0.2) {
s.vX = -0.2;
}
if (s.vY>=0 && s.vY<0.2) {
s.vY = 0.2;
}
};

this.move = function() {
var vX = s.vX*windOffset;
s.x += vX;
s.y += (s.vY*s.vAmp);
if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
s.x = 0;
} else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
s.x = screenX-storm.flakeWidth-1; // flakeWidth;
}
s.refresh();
var yDiff = screenY+scrollY-s.y;
if (yDiff<storm.flakeHeight) {
s.active = 0;
if (storm.snowStick) {
s.stick();
} else {
s.recycle();
}
} else {
if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
// ~1/1000 chance of melting mid-air, with each frame
s.melting = true;
s.melt();
// only incrementally melt one frame
// s.melting = false;
}
if (storm.useTwinkleEffect) {
if (!s.twinkleFrame) {
if (Math.random()>0.9) {
s.twinkleFrame = parseInt(Math.random()*20,10);
}
} else {
s.twinkleFrame--;
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
}
}
}
};

this.animate = function() {
// main animation loop
// move, check status, die etc.
s.move();
};

this.setVelocities = function() {
s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
};

this.setOpacity = function(o,opacity) {
if (!opacitySupported) {
return false;
}
o.style.opacity = opacity;
};

this.melt = function() {
if (!storm.useMeltEffect || !s.melting) {
s.recycle();
} else {
if (s.meltFrame < s.meltFrameCount) {
s.meltFrame++;
s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
} else {
s.recycle();
}
}
};

this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = (fixedForEverything?'fixed':'absolute');
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.meltFrame = 0;
s.melting = false;
s.setOpacity(s.o,1);
s.o.style.padding = '0px';
s.o.style.margin = '0px';
s.o.style.fontSize = s.fontSize+'px';
s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
s.o.style.textAlign = 'center';
s.o.style.verticalAlign = 'baseline';
s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
s.refresh();
s.o.style.display = 'block';
s.active = 1;
};

this.recycle(); // set up x/y coords etc.
this.refresh();

};

this.snow = function() {
var active = 0;
var used = 0;
var waiting = 0;
var flake = null;
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active == 1) {
s.flakes[i].move();
active++;
} else if (s.flakes[i].active === 0) {
used++;
} else {
waiting++;
}
if (s.flakes[i].melting) {
s.flakes[i].melt();
}
}
if (active<s.flakesMaxActive) {
flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
if (flake.active === 0) {
flake.melting = true;
}
}
};

this.mouseMove = function(e) {
if (!s.followMouse) {
return true;
}
var x = parseInt(e.clientX,10);
if (x<screenX2) {
windOffset = -windMultiplier+(x/screenX2*windMultiplier);
} else {
x -= screenX2;
windOffset = (x/screenX2)*windMultiplier;
}
};

this.createSnow = function(limit,allowInactive) {
for (var i=0; i<limit; i++) {
s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
if (allowInactive || i>s.flakesMaxActive) {
s.flakes[s.flakes.length-1].active = -1;
}
}
storm.targetElement.appendChild(docFrag);
};

this.timerInit = function() {
s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
};

this.init = function() {
s.randomizeWind();
s.createSnow(s.flakesMax); // create initial batch
addEvent(window,'resize',s.resizeHandler);
addEvent(window,'scroll',s.scrollHandler);
if (!isOldIE) {
addEvent(window,'blur',s.freeze);
addEvent(window,'focus',s.resume);
}
s.resizeHandler();
s.scrollHandler();
if (s.followMouse) {
addEvent(document,'mousemove',s.mouseMove);
}
s.animationInterval = Math.max(20,s.animationInterval);
s.timerInit();
};

var didInit = false;

this.start = function(bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
// already loaded and running
return true;
}
if (typeof s.targetElement == 'string') {
var targetID = s.targetElement;
s.targetElement = document.getElementById(targetID);
if (!s.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
}
}
if (!s.targetElement) {
s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
}
if (s.targetElement != document.documentElement && s.targetElement != document.body) {
s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
}
s.resizeHandler(); // get bounding box elements
s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
fixedForEverything = s.usePositionFixed;
if (screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
};

function doStart() {
s.start(true);
}

if (document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded',doStart,false);
window.addEventListener('load',doStart,false);
} else {
addEvent(window,'load',doStart);
}

}

snowStorm = new SnowStorm();
//]]>
</script>

Notas:

[1] He respetado los créditos al autor original: Schillmania, pienso que no sería pedir demasiado hicieseis lo mismo todos y no borraseis esa parte en el script...

[2] Una cosa a tener en cuenta, es que el efecto nieve también será visible en la parte de Diseño de nuestro blog, esto es normal y además he comprobado que no da ningún problema, aunque si en algún caso eso sucediese bastaría retirar el script.

[3] Para retirar el script una vez no queramos usarlo, nos fijaremos en las anotaciones que he puesto al comienzo y al final y que he destacado en color rojo en el código y borramos todo desde la primera anotación a la última, ambas incluidas.

[4] Hay algunos cambios que podemos hacer, aunque yo personalmente lo dejaría como est... cabe destacar que podemos aumentar la cantidad de copos de nieve en esta línea del script:

this.flakesMax = 150;

Script original de: Schillmania

[+/-]

Generador de mensaje de Navidad

[+/-]

Pack de iconos navideños

[+/-]

Headers Navideñas

[+/-]

Estrella de Navidad

Seguimos con cosillas para adornar el blog en estas fechas navideñas, pero antes de nada os recomiendo que no pretendáis poner todos estos adornos navideños a la vez, pues el funcionamiento del blog podría verse afectado.

Feliz Navidad

Esta Estrella de Navidad se pasea a lo ancho de nuestra pantalla de derecha a izquierda, saludando con la mano y deseando a nuestras vistas Feliz Navidad, una vez que desaparece por el lado izquierdo de la pantalla vuelve a salir desde el derecho y así sucesivamente.

Ejemplo de funcionamiento.

Código:

Lo colocaremos en un gadget html en cualquier parte de la plantilla, por ejemplo en el footer.

<marquee direction="left" style="position: absolute; left: 0px; top: 100px; height: 70px;" scrollamount="3"><img class="sin" src="http://img99.imageshack.us/img99/6566/xestelnadal2hl1.gif"/>Feliz Navidad</marquee>

Modificaciones:

Podemos usar cualquier imagen que nos guste, cambiando la url de la estrella por la de la imagen que vayamos a utilizar.

direction="left" Si queremos que la estrella comience su paseo por la derecha en lugar de salir desde la parte izquierda, cambiamos "left" por "right".

top: 100px; Es la distancia desde la estrella a la parte superior de la pantalla, según queramos que se vea más arriba o más abajo, cambiamos ahí el valor 100 por el que necesitemos.

height: 70px; Aquí pondremos el alto que tiene nuestra imagen e incluso algo más, para que esta no se vea cortada.

scrollamount="3" La velocidad de desplazamiento, a mayor número más velocidad.

Esta línea es la que controla el aspecto del texto que sigue a la estrella:

Feliz Navidad

Aquí podemos cambiar el color del texto y el tamaño. Si no queremos mostrar ningun mensaje siguiendo a la imagen, sencillamente borramos esa línea.

[+/-]

Nieve en el blog (II)

[+/-]

Concurso navideño en Pizcos Blog

[+/-]

Cartelitos de Navidad

[+/-]

Nieve en el blog

Un lindo efecto de nieve en el blog que conseguiremos usando la etiqueta "marquee".
Podéis ver como queda de lindo en este blog.

El código se construye a partir de una simple línea:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 16px; height: 700px;" scrollamount="5">*</marquee>

Esta línea de código hace que se forme un copo de nieve. Para mostrar el copo usamos un asterisco (*).
Cada vez que repetimos esta línea se forma un nuevo copo de nieve, eso si, tendremos en cuenta que si la copiamos tal cual, el copo saldrá encima del anterior. Para evitar esto y conseguir el efecto de nevada, tendremos que copiar esa línea tantas veces como copos queramos conseguir, pero modificando algunos valores:

left La distancia desde la izquierda de la pantalla, hasta donde se verá el copo caer. Aquí tendremos en cuenta ir colocando en cada línea distintos valores, por ejemplo, sumando 20 al valor anterior.
top La distancia desde la cabecera del blog, hasta el lugar donde aparecerá el copo. Si ponemos cero en todas las líneas de código, todos los copos saldrán desde arriba del todo de la pantalla.
width La anchura que ocupará el copo de nieve, en el caso de que usemos el asterisco no necesitaremos modificarla, si usamos una imagen en lugar del asterisco, tendremos que poner en todas las líneas la anchura que tenga la imagen.
height La distancia desde donde aparece el copo hasta donde se oculta. Si ponemos distintos valores quedará más bonito, pero puede dejarse el mismo para todos los copos (en todas las líneas).
scrollamount La velocidad de bajada del copo, cuanto menor sea este valor, más lento se desplazará el copo.
color El color del copo. En el ejemplo lo he puesto de color blanco, pero para un blog con fondo blanco tendremos que colocar un color más oscuro, un azul claro estaría bien (#66CCFF).

Como podéis apreciar en mi blog de ejemplo, he usado ademas de los asteriscos, alguna imagen (estrellas y copos de nieve). He tenido la precaución de buscarlas del mismo tamaño, para que resulte más sencillo armar el código.
La línea para un copo con imagen o la estrella, o la imagen que sea, sería esta:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 675px; top: 0px; width: 16px; height: 90px;" scrollamount="1"><img src="URL_DE_LA_IMAGEN"/></marquee>

En cuanto al letrero de "FELIZ NAVIDAD" lo he conseguido añadiendo en el código esta línea:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 500px; top: 0px; height: 200px;" scrollamount="1">FELIZ NAVIDAD</marquee>

Una vez explicadas las modificaciones que podemos hacer, os dejo el código para mostrar la nieve con los asteriscos, que pegaremos en un elemento HTML-Javascript.
Si no queréis usar imágenes, con copiar y pegar este código, tendréis la nieve en el blog.
Si queréis usar alguna de mis imágenes (las estrellas o el copo) estas son las urls:

Estrella azul: http://img206.imageshack.us/img206/4751/16starcoldxh2.png
Estrella dorada: http://img155.imageshack.us/img155/6118/16starhotzj7.png
Copo: http://img153.imageshack.us/img153/1231/stockweathersnowrk3.png

Código: