Tutorial:Cursor con texto en movimiento
Hoy traje otro tutorial!
Es muy sencillo,ya me lo habian pedido antes,hace bastaaaaaaaaaante XD
Y bueno,justo lo encontre y se me ocurrio compartirse los a ustedes,en muchos blogs estan esos cursores al moverlos los sigue una hilera de letras..Ese es el tema del tutorial ;)
Primero nos dirigimos a
Diseño/Edición HTLM/Antes de </head> pega el siguiente codigo:
<script language='javascript' type='text/javascript'>
//Cursor con texto en movimiento
//<![CDATA[
var x,y
var tempo = 10
var espera = 0
var texto = "Texto que quieres colocar"
texto = texto.split("")
var xpos = new Array()
for (i = 0; i <= texto.length - 1; i++) {
xpos[i] = -50
}
var ypos = new Array()
for (i = 0; i <= texto.length - 1; i++) {
ypos[i] = -50
}
function seguir(e){
//si no es NS4, usa objeto window.event
if (!e) var e = window.event
//NS4
if (e.pageX || e.pageY) {
x = e.pageX
y = e.pageY
window.status = x + ' : ' + y
//IE y compatibles con DOM
} else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
window.status = x + ' : ' + y
//no soportado, no hace nada
} else {
return
}
espera = 1
}
function animar_cursor() {
if ( espera == 1 ) {
for ( i = texto.length - 1; i >= 1; i--) {
xpos[i] = xpos[i-1] + tempo
ypos[i] = ypos[i-1]
}
xpos[0] = x + tempo
ypos[0] = y
}
//para el IE 4.x
if ( espera==1 && document.all ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = eval("span" + i + ".style")
letra.posLeft = xpos[i]
letra.posTop = ypos[i]
}
}
//para el Netscape 4.x
else if ( espera==1 && document.layers ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = eval("document.span" + i)
letra.left = xpos[i]
letra.top = ypos[i]
}
}
//para navegadores compatibles DOM
else if ( espera==1 && document.getElementById ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = document.getElementById( "span" + i)
letra.style.left = xpos[i] + 'px'
letra.style.top = ypos[i] + 'px'
}
}
var timer = setTimeout("animar_cursor()", 30)
}
if (document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = seguir
//]]>
</script>
<style type='text/css'>
.cursoranimado {
position:absolute;
visibility:visible;
top:-50px;
font-size:11pt;
font-family:Arial;
font-weight:bold;
color:red;
}
</style>
<script language='javascript' type='text/javascript'>
//<![CDATA[
if (document.layers) {
for (i=0;i<=texto.length-1;i++) {
document.write('<span id="span' + i + '" class="cursoranimado">')
document.write(texto[i])
document.write('</span>')
}
} else if (document.all || document.getElementById) {
for (i=0;i<=texto.length-1;i++) {
document.write('<div id="span' + i + '" class="cursoranimado">')
document.write(texto[i])
document.write('</div>')
}
}
animar_cursor()
//]]>
</script>
Ahora edita lo que esta en rojo,que es el texto que quieras colocarle :)
En
font-size puedes cambiar el tamaño de la letra.En
color puedes cambiar el color de la letra.
Espero que les sirva!
Dudas?Comenta ;)
Etiquetas: Tutoriales Blogger
Older Post | Newer Post
