12/01/2005, 09:41
|
| | | Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 3 meses Puntos: 13 | |
| Para el efecto de las burbujas se utiliza un gif animado como fondo, asignado con CSS en el estado HOVER de algunos divs, por ejemplo:
#explanation:hover {
background: url(blubba6.gif) no-repeat 40px 0;
}
El tema del buzo con la linterna es un juego de capas.
Tienes un div (#extraDiv3) que tiene la linterna (png) como imagen de fondo, al div le han dado una posicion fija (fixed), y un z-index:8
Para el buzo, han puesto un div (#extraDiv2) que tiene al buzo (png) como imagen de fondo. A este div le han dado la misma ubicacion que el div de lal ibnterna, pero con un z-index:10;
Por ultimo, el efecto d elal interna que se va apagando gradualmente a medida que quedan mas cerca de la superficie del mar.
Han puesto un div (#extraDiv4) con un z-index:9 para que quedara entremedio de los dos divs anteriores. La imagen de este div es una franja vertical con una degradacion con transparencia. Este div no tiene una posicion fija, por lo que se mueve segun el movimiento del scroll.
Gracias a este movimiento, y que el buzo con la linterna quedan fijos, es que la franja vertical va tapando la linterna de acuerdo al grado de transparencia del degradé.
Revisa el archivo css y fijate en los estilos para #extraDiv2, #extraDiv3 y #extraDiv4 |