animación que acompaña al cursor?

¿Cómo se consigue este efecto?
http://www.sironet.com/tienda/default.php

Salu2

http://img359.imageshack.us/img359/6631/celliigy4.pngKeep on Rollin' :mad:

Yo no veo ninguna animación en esa página. Pero si acaso te sirve de algo, una animación que siga al cursor del ratón se puede hacer en flash como lo muestra el siguiente manual:

http://www.solophotoshop.com/Tutorial-Mirada-Acosadora-con-Flash-8-c-367.html

Saludos

Los caracteres persiguen al cursor mientras éste se encuentra en movimiento. Cuando el cursor se detiene les da tiempo a colocarse en su sitio e ir girando alrededor de él formando el reloj de las imágenes más a la derecha.

Giskard: Gracias por el link ;)
http://img214.imageshack.us/img214/2443/relojwm4.png

Salu2

http://img359.imageshack.us/img359/6631/celliigy4.pngKeep on Rollin' :mad:

Buenas! A mi tampoco me aparece el efecto :S. Pero eso tiene toda la pinta de ser un javascript.

Saludos

He revisado el código fuente de la página y efectivamente así es:

Cita:

---

<SCRIPT language=JavaScript>
dCol='000000';//date colour.
fCol='000000';//face colour.
sCol='b82504';//seconds colour.
mCol='b82504';//minutes colour.
hCol='b82504';//hours colour.
ClockHeight=29;
ClockWidth=29;
ClockFromMouseY=0;
ClockFromMouseX=100;

//Alter nothing below! Alignments will be lost!

d=new Array("DOMINGO","LUNES","MARTES","MIERCOLES","JUEV ES","VIERNES","SABADO");
m=new Array("ENERO","FEBRERO","MARZO","ABRIL","MAYO","JU NIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVI EMBRE","DICIEMBRE");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.2;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a +';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a +';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;fo nt-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;fo nt-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;fo nt-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromM ouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove =Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',30);
}
if (ns||ie)window.onload=Delay;
</SCRIPT><!--entete-->

---

He aquí el código. Cópialo en un fichero .html vacío y verás el resultado.

Lo que no entiendo es por qué no lo ha ejecutado mi Firefox... que raro porque tiene habilitado el permiso para ejecutar javascripts.

Saludos

Gracias, qué vago soy xD Anda que no mirar ni el html xDD

Salu2

http://img359.imageshack.us/img359/6631/celliigy4.pngKeep on Rollin' :mad:

Sin embargo con IE si funciona...

que paranoia... ¿por qué?

jajaja j8, es que para mirar el código fuente nos tienen que decir que es un reto hack jajaja

Saludos

Cita:

---

Iniciado por hystd

jajaja j8, es que para mirar el código fuente nos tienen que decir que es un reto hack jajaja

---

xD

Si incluyo el script en un archivo local no me lo ejecutan ni opera ni firefox :S

Quizá esté mal el html...
http://nopaste.com/p/alaWP1DvS

PD: Es lo que me encanta de javascript, su magnífica capacidad de depuración de errores xD

Salu2

http://img359.imageshack.us/img359/6631/celliigy4.pngKeep on Rollin' :mad:

creo que el fallo esta aquí, parece que este codio es un copy-paste que se encontraron los desarrolladores del sitio, y no probaron en otros navegadores que no sea ie...... como siempre:

Código:

---

function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}

---

La variable event no esta declarada, está declarada evnt. Aunque para ie, la variable event siempre es el evento, por ello en ie si funciona


Salu2

Debe ser eso, aunque yo no he probado con ie. Sólo primero con opera y luego con firefox.

Salu2

http://img359.imageshack.us/img359/6631/celliigy4.pngKeep on Rollin' :mad:

Cita:

---

Lo que no entiendo es por qué no lo ha ejecutado mi Firefox... que raro porque tiene habilitado el permiso para ejecutar javascripts.

---

es porque firefox utiliza javascript 1.5 (la última versión de javascript) si no se le indica explicitamente la versión de javascript a usar, mientras que ie utiliza motor propio que no reconoce ni siquiera la totalidad del javascript 1.4 (el iexplorer 6, el 7 no lo se) con detalles propios... y las versiones de javascript más antiguas eran mucho más permisivas e inseguras y además hubo un par de cambios en el lenguaje... aun hoy en día es recomendable utilizar javascript 1.2 para no tener problemas con los navegadores, ya que es una versión ecmascript pura que reconocen todos los navegadores que soportan javascript, las versiones posteriores no son tan universalmente aceptadas...

Un Saludo

Conforme iba leyendo el post, sabia que gondar_f os lo acabaria aclarando.
Eso es un error heredado desde los tiempo que solo estaban IExplorer (ie) y Netscape(ns).
Ahora ya depende de la versión de cada navegador que use cada uno, funcionara el javascript o no.
Y con VisualBasicScript aun se puede potenciar mas ese efecto :)

A ver, la misma versión de firefox ejecuta el javascript en la página original y no lo ejecuta en el archivo local.

Salu2

http://img359.imageshack.us/img359/6631/celliigy4.pngKeep on Rollin' :mad: