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:
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:
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:
<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:
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:
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: