¿Cómo se crea este efecto de imagen?

Question

He estado mirando esta página desde hace algún tiempo.Increíble, de verdad.Pero no puedo decir cómo funciona el efecto de imagen de fondo que ocurre al desplazarse.Revisé el código y descubrí que están usando Jquery más una serie de complementos de desplazamiento, pero no hay nada sobre las imágenes que puedo ver.

¿Cómo dirías que se hace?

El sitio: http://herohousing.org/UBBT/

Answer 1

Este truco es bastante simple y solo necesita algo de CSS donde cada panel tiene una imagen de fondo fija:

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

Aquí estoy usando la misma imagen de fondo, pero el diferente color de fondo y la repetición de la imagen deberían mostrarte que son tres elementos diferentes.

---

EditarBueno, parece que algunos dudan de lo que estoy escribiendo.Y de hecho, el sitio citado utiliza jQuery para esto.Pero sólo para ajustar la imagen al ancho y alto de la ventana gráfica del navegador, ya que todavía no se puede dimensionar una imagen de fondo.CSS 3 especifica un background-size propiedad pero su soporte sigue siendo propietario utilizando el prefijo específico del proveedor como -khtml- (Conquistador), -moz- (Navegadores basados ​​en Gecko como Firefox), -o- (ópera) y -webkit- (Navegadores basados ​​en WebKit como Safari).

Si puedes abstenerte de eso, puedes usar la técnica CSS que te mostré.

Answer 2

Es 4 divs una imagen de fondo diferente para cada uno, lo que hace que el trabajo efecto particularmente bien es el "fondo-adjunto: fijo;" con propiedad para detener el avance de fondo.

Si descarga Firebug para Firefox, puede inspeccionar los divs y observar cómo el CSS hace que la página se comportan y el intento de replicar por sí mismo.

Realmente bonito efecto mirando debo admitir: -)