HTML 5 y animaciones

Iniciado por basickdagger, 23 Agosto 2011, 01:48 AM

0 Miembros y 2 Visitantes están viendo este tema.

basickdagger

hola, bueno estoy intentando realizar una animacion como la de esta pagina http://www.bhp-global.com/# pero no quiero utilizar flash y eh visto q html5 y css3 ya puede realizar estas cosas, si alguien de aqui sabe si esto es cierto y aplica ahorita para la mayoria de navegadores, o es una tecnologia q aun esta en su fase beta.....

Nakp

te interesan las animaciones :P así que olvídate de opera e internet explorer por el momento, además html5 todavía no es un estándar, es un borrador

http://www.normansblog.de/demos/browser-support-checklist-css3/
Ojo por ojo, y el mundo acabará ciego.

basickdagger

ok gracias... =D  pero eh decidido crear la pagina para distintos navegadores, aunq no siempre tenga q salir animado... pero bueno probando esto( en chrome claro) quiero hacer el movimiento de un content de derecha a izquierda... ya pude hacerlo el problema va aqui, cuando hace el movimiento el scrollbar de la parte inferior esta "largo" y conforme se va moviendo y llega al punto final el scrollbar desaperece y se detiene. hay alguna propiedad para q el content empiece desde el borde del tamaño
de la resolucion? bueno estes e s mi parte del codigo para el movimiento.


@-webkit-keyframes movimiento-diagonal {
   from {
      left: 500px;
   }
   
   to {
      left: 0%;
   }
}

#content{

width:500px;
height:350px;
margin: 30px 20px 0 0;
float: right;
overflow-y: auto;
overflow-x: auto;
background-image:url("img/trans.png");
        font-family: verdana;
        -webkit-border-radius: 10px;
font-style: bold;
font-size:15px;

// esto es lo interesante =P

-webkit-animation-name: movimiento-diagonal;
   -webkit-animation-duration: 5s;
    position:relative;
   padding: 2px;
 
 
 
}




basickdagger

bueno eso ya lo pude solucionar... ahora mi duda es... quiero q salga corto el borde de el margen del navegador.... si se fijan en los 2 cuadros negros en las orillas pegadas al margen del navegador se ve una curvatura...lo q quiero es q este totalmente pegado y esa corbatura no se vea... chequenlo aki 

buulinc.com/inbuul

Nakp

por lo visto tienes esto:

border-radius: 10px 10px 10px 10px;

cambialo por 0 10px 10px 0;

Ojo por ojo, y el mundo acabará ciego.

basickdagger

=D muchas gracias!!, nunca habia utilizado esa propiedad y dudaba de esoo  :laugh: