Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Animación en CSS: Parallax Scrolling
#1
El Parallax Scrolling (PS en adelante) es una técnica de animación utilizada en diversos medios, que tiene su origen en la industria de los videojuegos a comienzos de los 80. El PS consigue crear un efecto de profundidad mediante la superposición de varias capas. Actualmente se está extendiendo su uso en el diseño de páginas web por lo que vamos a ver de forma sencilla su implementación en CSS.


Concepto de Parallax Scrolling


Una de las primeras páginas (tal vez la primera) en usar el PS dentro de su diseño fue Silverback, así que os aconsejo que hagáis un inciso en vuestra lectura para hacerle una visita.

Si cambiamos el tamaño de la ventana de nuestro navegador vemos como en el header de la página las lianas reaccionan de diferente forma, como si en vez de un navegador estuviésemos moviendo una cámara.
[Imagen: parallax-scrolling01.jpg]
Esto se consigue mediante la superposición de varias capas con imágenes con fondo transparente, que mediante diferencias de velocidad en su movimiento, crean la sensación que buscamos.

Implementación en CSS de Parallax Scrolling


Vamos a crear un ejemplo fácil con tres capas que recrearán un cielo con nubes. En primer lugar crearemos una imagen azul para el fondo, y por encima colocaremos dos capas con nubes y fondo transparente (usaremos un formato PNG).

Cita:body {
background:#66ccff url(../images/cielo.jpg) 20% 0 repeat-x;
}

div#nubesLejos{
position:absolute;
z-index:997;
background:transparent url(../images/nubesLejos.png) 40% 0 repeat;
margin:0;
padding:0;
width:100%;
height:100%;
}

div#nubesCerca{
position:absolute;
z-index:998;
background:transparent url(../images/nubesCerca.png) 150% 0 repeat;
margin:0;
padding:0;
width:100%;
height:100%;
}

La clave del PS se encuentra en las declaraciones background. Como veis posicionamos la imagen de fondo mediante porcentajes diferentes para cada capa. Así conseguimos que cuando redimensionamos la ventana, las imágenes de las distintas capas reaccionen de diferente forma y den la sensación de movimiento.

Para que el efecto de sensación de profundidad nos aseguramos que las capas con mayor z-index (capas superiores) tengan un porcentaje de posición mayor que las que tengan por debajo. Esto se traduce visualmente en un movimiento más rápido.
#2
tienes una web con demo?
#3
¿Podrías dejar un demo? ¿O las imágenes que utilizaste en ese ejemplo específico?

+rep por el aporte.

WWW
#4
muy interesante, merece ser aprendida esta tecnica.

Gracias por el aporte!!!
#5
:O Ahora es posible hacer increibles animaciones con CSS3 y HTML5, a aprender un poco mas.
#6
muy bueno men pero parace que se me haces familiar no eres mi amigo de cyber-xtreme??
Mi Web http://www.DjNet.com.ar
-Foro
-Chat
-Blog
De todo podras ver en http://www.djnet.com.ar
#7
deja una demo por favor Sonrisa
#8
Si ve bueno, pero con una demo terminaría de impresionarme.




Usuarios navegando en este tema: 1 invitado(s)