Foros del Web » Creando para Internet » CSS »

Animacion sprite CSS3

Estas en el tema de Animacion sprite CSS3 en el foro de CSS en Foros del Web. Buenas a todos, estoy intentando hacer una animación como la de la página: http://www.8020studio.com Pero no doy exactamente con la clave, de hecho se anima ...
  #1 (permalink)  
Antiguo 15/03/2011, 04:08
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Animacion sprite CSS3

Buenas a todos, estoy intentando hacer una animación como la de la página:
http://www.8020studio.com
Pero no doy exactamente con la clave, de hecho se anima la parte del título (que pasa del gris original a uno algo más oscuro) pero no consigo que se anime el sprite de la imagen en b&N a color. Creo que solo utiliza CSS, este sería el código:

HTML:
Código:
<ul id="work-list">
     <li id="work-list-skype">
        <a href="#skype" linkindex="3">
        <span class="project-name">Skype</span>
        <span class="poject-extra"></span>
        </a>
      </li>
</ul>
CSS:
Código:
a:link, a:visited {

	text-decoration: none;
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}




/* --------------------------------------------------------------------------
	=work list
--------------------------------------------------------------------------- */

#work-list {
	height: 1007px;
	list-style: none;
	line-height: 0;
	margin: 30px auto 0;
	position: relative;
	text-align: left;
	width: 915px;
}

#work-list li {
	position: absolute;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list-skype {
	left: 0;
	top: 0;
}

#work-list a {
	color: #fff;
	display: block;
	font: 12px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-weight: 100;
	height: 233px;
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	width: 295px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#work-list-skype, #work-list-skype a {
	background: #444750 url(../images/borrar/proj-thumb-skype.jpg) no-repeat 0 0;
}

#work-list a:hover {
	background-color: #323437;
}

#work-list-skype a,
#work-list-sony a,
#work-list-voda360web a {
	height: 511px;
}

#work-list span.project-name {
	bottom: 0;
	display: block;
	left: 0;
	line-height: 20px;
	padding: 0 0 15px 20px;
	position: absolute;
	width: 275px;
}

#work-list span.project-extra {
	display: block;
	height: 184px;
	left: 0;
	position: absolute;
	top: 0;
	width: 295px;
}

#work-list-skype span.project-extra,
#work-list-sony span.project-extra,
#work-list-voda360web span.project-extra {
	height: 462px;
}

#work-list li a span.project-extra {
	opacity: 0;
	z-index: 20;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list a:hover span.project-extra {
	opacity: 1;
}


#work-list-skype a span.project-extra, #work-list-skype a:hover span.project-extra {
	background: url(../images/borrar/proj-thumb-skype.jpg) no-repeat scroll -295px 0 transparent;
}

Alguna idea de por qué la imagen no se anima y el fondo del titulo si?

Muchas gracias a todos de antemano.
  #2 (permalink)  
Antiguo 15/03/2011, 05:35
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Animacion sprite CSS3

O un ejemplo claro de como podría hacerse???
  #3 (permalink)  
Antiguo 15/03/2011, 11:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Animacion sprite CSS3

No hay animaciones css.
Yo lo que veo es un cambio de imagen del background al hover con la técnica del sprite:
Código HTML:
Ver original
  1. <li id="work-list-better-place"><a href="#better-place"><span class="project-name">Better Place Vehicle Dashboard</span><span class="project-extra"></span></a></li>
y el css:
Código CSS:
Ver original
  1. #work-list-better-place a span.project-extra, #work-list-better-place a:hover span.project-extra {
  2.     background: url(../img/proj-thumb-better-place.jpg) no-repeat -295px 0;
  3. }

Y la imagen utilizada la puede ver en http://www.8020studio.com/img/proj-t...tter-place.jpg
  #4 (permalink)  
Antiguo 16/03/2011, 11:45
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 10 años, 10 meses
Puntos: 1
Respuesta: Animacion sprite CSS3

Buenas Qseso, no se con qué navegador estás viendo la web, pero con chrome, safari y firefox en su versión 4, te aseguro que hay animación del blanco y negro al color.

En cualquier caso he dado con la solución, la animación con la parte del título de la imagen (la que cambia de gris a gris más oscuro) está hecha íntegramente en css pero la misma animación del sprite de imagen lleva asociados varios archivos JS.

Gracias de todas formas Qseso por tu respuesta.
  #5 (permalink)  
Antiguo 16/03/2011, 12:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Animacion sprite CSS3

Sí, tiene razón, hay una pequeña transición en las imágenes, pero tan breve que unida a los tonos de las imágenes no la había advertido:
Código CSS:
Ver original
  1. #work-list a {
  2.     -webkit-transition: all 0.2s ease-in-out;
  3.     -moz-transition: all 0.2s ease-in-out;
  4.     -o-transition: all 0.2s ease-in-out;
  5.     transition: all 0.2s ease-in-out;
  6. }
Si se fija, verá que utiliza la forma acortada de la declaración, y que el valor 0.2s se corresponde con la propiedad transition-duration.
  #6 (permalink)  
Antiguo 16/03/2011, 12:09
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: Animacion sprite CSS3

El problema está en que has puesto:

<span class="poject-extra"></span>

En lugar de:

<span class="project-extra"></span>

Etiquetas: animacion, sprite
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:00.