 |
| Estás en: Juan Rodríguez, web personal > JavaScript > Índice de guiones > Texto en movimiento cambiando de color < |
Verificado en: Opera 9.02 y 9.20Opera 6.05, 7 y 8 Firefox 1.5, 3.0b5 y 3.0.6 Mozilla 1.8 Netscape 7 Internet Explorer 6 y 7
|
El texto se desplaza al tiempo que cambia de tono de color. Se puede alterar el sentido de marcha (izquierda a derecha), los colores, la velocidad,... En el ejemplo, el fondo es transparente y el texto inicialmente es blanco (si el fondo de página fuese blanco, no se vería). El guión se activa automáticamente al descargarse la página. Ver etiqueta body. |
Personalización del guión* El color del texto y su posición pueden cambiarse mediante etiquetas de estilo. Ver <style>...</style> en cabecera. * El movimiento se inicia desde posizq que es igual, en el ejemplo, a la posición inicial del texto. Pueden ser diferentes. |
Ejemplo de aplicación de este guiónTexto en movimiento:
Este texto se mueve
de derecha a izquierda
mientras cambia de tono.
¿ Aplicaciones ?
Todas las que precisen
imaginación y diseño.
| ||
Instalación Ver código Descargar + guiones
Código en las cabeceras (head) de la página
<script type="text/javascript">
<!-- inicio
saltos=10; rojo=240; verde=240; azul=240; posver=250; posizq=500; num=0;
function colorear() {
ancho = screen.width;
if (ancho < 1024) {posver=300} else {posver=250};
coloreando() }
function coloreando() {
if (posizq>30) { posizq-=saltos;
document.getElementById("texto-"+num).style.left=posizq+"px";
document.getElementById("texto-"+num).style.top=posver+(15*num)+"px";
rojo-=1; verde-=2; azul-=3;
document.getElementById("texto-"+num).style.color="rgb("+rojo+","+verde+","+azul+")";
setTimeout("coloreando()",10); }
else { rojo+=15; verde+=15; azul+=30; posizq=500; if(num < 7) { num++; setTimeout("coloreando()",100); } } }
// final -->
</script>
<style type="text/css">
div.int01 {position:absolute; left:500px; color:#CCCCCC}
</style>
Código en el cuerpo (body) de la página
<body onload="colorear()">
<div id="texto-0" class="int01">Texto en movimiento:</div>
<div id="texto-1" class="int01">Este texto se mueve</div>
<div id="texto-2" class="int01">de derecha a izquierda</div>
<div id="texto-3" class="int01">mientras cambia de tono.</div>
<div id="texto-4" class="int01">¿ Aplicaciones ?</div>
<div id="texto-5" class="int01">Todas las que precisen</div>
<div id="texto-6" class="int01">imaginación y diseño.</div>
<div id="texto-7" class="int01"><a href="http://www.juan-rodriguez.net">Juan Rodríguez, consultor</a></div>
Copyright ©
Juan Rodríguez, consultor y
Begues Internet, s.l.
Todos los derechos reservados
Aviso Legal
Cuidar de nuestro entorno natural,
puede y debe ser cosa de todos.
Por ejemplo, no gastando papel para
imprimir una información que siempre
puedes tener en la pantalla de tu pc.
- -
Juan Rodríguez, consultor
Castelldefels (Barcelona)
