Resultados 1 al 13 de 13

Tema: animación que acompaña al cursor?

  1. #1 animación que acompaña al cursor? 
    Moderador Global
    Fecha de ingreso
    Aug 2005
    Mensajes
    6.279
    Descargas
    7
    Uploads
    0
    ¿Cómo se consigue este efecto?
    http://www.sironet.com/tienda/default.php

    Salu2


    Keep on Rollin'

    . . . . . . . . . . . . . . . . . . . .
    [[ NORMAS DEL FORO ]]
    . . . . . . . . . . . . . . . . . . . .
    __________
    Citar  
     

  2. #2  
    Moderador HH
    Fecha de ingreso
    Feb 2002
    Ubicación
    México
    Mensajes
    1.155
    Descargas
    4
    Uploads
    0
    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/Tutoria...h-8-c-367.html

    Saludos
    Mientras el mundo permanezca no acabarán la fama y la gloria de México-Tenochtitlan
    Citar  
     

  3. #3  
    Moderador Global
    Fecha de ingreso
    Aug 2005
    Mensajes
    6.279
    Descargas
    7
    Uploads
    0
    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


    Salu2


    Keep on Rollin'

    . . . . . . . . . . . . . . . . . . . .
    [[ NORMAS DEL FORO ]]
    . . . . . . . . . . . . . . . . . . . .
    __________
    Citar  
     

  4. #4  
    Moderador Global Avatar de hystd
    Fecha de ingreso
    Jul 2005
    Ubicación
    1, 11, 21, 1211...
    Mensajes
    1.596
    Descargas
    58
    Uploads
    0
    Buenas! A mi tampoco me aparece el efecto :S. Pero eso tiene toda la pinta de ser un javascript.

    Saludos
    Citar  
     

  5. #5  
    Moderador Global Avatar de hystd
    Fecha de ingreso
    Jul 2005
    Ubicación
    1, 11, 21, 1211...
    Mensajes
    1.596
    Descargas
    58
    Uploads
    0
    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","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
    Citar  
     

  6. #6  
    Moderador Global
    Fecha de ingreso
    Aug 2005
    Mensajes
    6.279
    Descargas
    7
    Uploads
    0
    Gracias, qué vago soy xD Anda que no mirar ni el html xDD

    Salu2


    Keep on Rollin'

    . . . . . . . . . . . . . . . . . . . .
    [[ NORMAS DEL FORO ]]
    . . . . . . . . . . . . . . . . . . . .
    __________
    Citar  
     

  7. #7  
    Moderador Global Avatar de hystd
    Fecha de ingreso
    Jul 2005
    Ubicación
    1, 11, 21, 1211...
    Mensajes
    1.596
    Descargas
    58
    Uploads
    0
    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
    Citar  
     

  8. #8  
    Moderador Global
    Fecha de ingreso
    Aug 2005
    Mensajes
    6.279
    Descargas
    7
    Uploads
    0
    Cita Iniciado por hystd Ver mensaje
    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


    Keep on Rollin'
    Última edición por j8k6f4v9j; 02-10-2007 a las 02:47

    . . . . . . . . . . . . . . . . . . . .
    [[ NORMAS DEL FORO ]]
    . . . . . . . . . . . . . . . . . . . .
    __________
    Citar  
     

  9. #9  
    Avanzado
    Fecha de ingreso
    Jun 2006
    Mensajes
    538
    Descargas
    3
    Uploads
    0
    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
    Última edición por Ktorce; 02-10-2007 a las 10:28
    Citar  
     

  10. #10  
    Moderador Global
    Fecha de ingreso
    Aug 2005
    Mensajes
    6.279
    Descargas
    7
    Uploads
    0
    Debe ser eso, aunque yo no he probado con ie. Sólo primero con opera y luego con firefox.

    Salu2


    Keep on Rollin'

    . . . . . . . . . . . . . . . . . . . .
    [[ NORMAS DEL FORO ]]
    . . . . . . . . . . . . . . . . . . . .
    __________
    Citar  
     

  11. #11  
    Moderador HH
    Fecha de ingreso
    Mar 2003
    Ubicación
    Galiza
    Mensajes
    3.919
    Descargas
    8
    Uploads
    1
    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
    He conocido muchos dioses. Quien niegue su existencia está tan ciego como el que confía en ellos con una fe desmesurada. Robert E. Howard
    La suerte ayuda a la mente preparada.
    Citar  
     

  12. #12  
    Co-Admin HackHispano.com Avatar de clarinetista
    Fecha de ingreso
    Jan 2004
    Ubicación
    HackHispano/SM
    Mensajes
    7.721
    Descargas
    30
    Uploads
    8
    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
    Citar  
     

  13. #13  
    Moderador Global
    Fecha de ingreso
    Aug 2005
    Mensajes
    6.279
    Descargas
    7
    Uploads
    0
    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


    Keep on Rollin'

    . . . . . . . . . . . . . . . . . . . .
    [[ NORMAS DEL FORO ]]
    . . . . . . . . . . . . . . . . . . . .
    __________
    Citar  
     

Temas similares

  1. Duda de animación
    Por proteo1 en el foro GENERAL
    Respuestas: 2
    Último mensaje: 12-10-2010, 21:30
  2. Animación en flash
    Por Giskard en el foro OFF-TOPIC
    Respuestas: 0
    Último mensaje: 30-11-2007, 21:32
  3. Programa de animacion 3D
    Por vladivx en el foro APLICACIONES
    Respuestas: 4
    Último mensaje: 26-06-2007, 18:51
  4. Animación
    Por Ludo en el foro APLICACIONES
    Respuestas: 10
    Último mensaje: 03-06-2004, 21:33
  5. Parpadeos con animación java
    Por Nevershine en el foro PROGRAMACION DESKTOP
    Respuestas: 0
    Último mensaje: 13-05-2004, 16:42

Marcadores

Marcadores

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •