PDA

Ver la versión completa : animación que acompaña al cursor?



j8k6f4v9j
02-10-2007, 00:43
¿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:

Giskard
02-10-2007, 02:04
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

j8k6f4v9j
02-10-2007, 02:19
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:

hystd
02-10-2007, 02:33
Buenas! A mi tampoco me aparece el efecto :S. Pero eso tiene toda la pinta de ser un javascript.

Saludos

hystd
02-10-2007, 02:35
He revisado el código fuente de la página y efectivamente así es:


<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","JUEVES","VIERNES","SABADO");
m=new Array("ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","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+';widt h:'+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+';widt h:'+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;font-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;font-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;font-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

j8k6f4v9j
02-10-2007, 02:38
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:

hystd
02-10-2007, 02:39
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

j8k6f4v9j
02-10-2007, 02:44
jajaja j8, es que para mirar el código fuente nos tienen que decir que es un reto hack jajajaxD

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:

Ktorce
02-10-2007, 10:22
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:



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

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

j8k6f4v9j
02-10-2007, 16:30
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:

gondar_f
02-10-2007, 20:10
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

clarinetista
05-10-2007, 00:24
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 :)

j8k6f4v9j
05-10-2007, 04:56
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: