Este truco se me ocurrió al ver en una web que la cebecera destinada al título del blog tenía un fondo en movimiento, en especial, una imagen de unas bonitas flores. Se trataba de una animación en flash.
Por suerte, es posible conseguir un efecto prácticamente idéntico utilizando javascript y sin necesidad de alojar archivos en un servidor externo.
En este blog puedes ver el truco en funcionamiento.
Busca la etiqueta </head> y encima inserta el script:
<style type='text/css'>
#header h1 { color: #ffffff; }
#header-wrapper {
background: transparent url(URL DE TU IMAGEN) repeat left top;
margin:0 auto;
border: 4px solid #cccccc;
height: 122px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function blfondomov1(maxSize,blfondomov2) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) { backgroundOffset = 0; }
if(blfondomov2==false) {
document.getElementById('header-wrapper').style.backgroundPosition = '0 ' + backgroundOffset + 'px';
} else {
document.getElementById('header-wrapper').style.backgroundPosition = backgroundOffset + '0px 0px';
}
}
var backgroundOffset = 0;
window.onload = function() {
setInterval('blfondomov1(300,true)', 100);
}
//]]>
</script>
La primera línea de CSS, #header h1 { color: #ffffff; }, aplica un color blanco al título del blog, el cual puede ser editado con ayuda de la tabla de colores.
Reemplaza URL DE TU IMAGEN por la dirección de la imagen de fondo que deseas utilizar en la cabecera de tu blog [+].
La imagen de fondo está configurada para que se mueva de forma vertical. Puedes hacer que se mueva de forma horizontal reemplazando la palabra true por false en el código.
El valor 100 representa la velocidad a la que la imagen se desplazará. Está expresado en milisegundos (1000 milisegundos equivalen a 1 segundo, 2000 milisegundos equivalen a 2 segundos...) y puedes editarlo a tu gusto.
Guarda la plantilla para terminar:
Nota:
Oye Jaime
Aki estoy otra vez, sera posible que el movimiento del fondo sea horizontal en lugar de vertical...?
Gracias!
¡Bienvenida, Karla!
Ahora mismo me paso por tu blog a ver esas plantillas.
En cuanto al movimiento... está explicado en la cuarta línea (empezando desde el final de la entrada) ;).
¡Abrazos!
Gracias Jaime!
jaja, me aceleré en preguntar antes de leer esa parte...
Hasta luego y buen fin de semana!!
No te preocupes, Karla, todos podemos tener algún despiste.
¡Abrazos y buen fin de semana!
Dices que tienes aquí un ejemplo de la cabecera en movimiento, donde está el ejemplo? Gracias.
Liliana, si te fijas bien, la propia frase "este blog" contiene un enlace (por ello tiene un color distinto al resto del texto). En muchos de los trucos encontrarás enlaces "camuflados" de esta forma, pero siempre en color gris.
El blog para ver el resultado es este:
http://elbalcon-header.blogspot.com/