¿Cómo se crea este efecto de imagen?

He visto esta página desde hace un tiempo. Increíble, de verdad. Pero no puedo decir cómo funciona el efecto de imagen de fondo que ocurre en el desplazamiento. He revisado el código que indica que están usando Jquery más una cantidad de complementos de desplazamiento, pero nada sobre las imágenes que puedo ver.¿Cómo se crea este efecto de imagen?

¿Cómo dirías que ya está?

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

Fuente

2010-03-10 Industrial

muy interesante, se trata de una página que va a tomar algún tiempo para disect ... pero muy fresco. – Zoidberg

¿Por qué la etiqueta jQuery? Para muchas cosas, no se necesita javascript en absoluto. – Dykam

Este truco es muy sencillo y sólo necesita un poco de CSS, donde cada panel tiene una imagen de fondo que se 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 mostrarle que se trata de tres elementos diferentes.

Editar Ok, parece que de alguna duda de lo que estoy escribiendo. Y, de hecho, el sitio citado usa jQuery para esto. Pero solo para ajustar la imagen al ancho y alto de la ventana del navegador, ya que todavía no se puede dimensionar una imagen de fondo. CSS 3 especifica un background-size property pero su soporte sigue siendo propietario utilizando el prefijo específico del proveedor como -khtml- (Konqueror), -moz- (navegadores basados en Gecko como Firefox), -o- (Opera) y -webkit- (navegadores basados en WebKit como Safari).

Si puede abstenerse de eso, puede usar la técnica de CSS que le mostré.

Fuente

2010-03-10 18:36:10 Gumbo

Olvidó usar JQuery para asignar imágenes en '.a',' .b' y '.c' div's. –

@The Elite Gentleman: ¿Por qué debería usar jQuery cuando hay una solución de CSS simple? Y los DIV * * tienen una imagen de fondo. – Gumbo

Pero aún así hacen algo con JS. Si desactivo JS, entonces no se muestra ninguna imagen de fondo. –

Son 4 divs con una imagen de fondo diferente para cada uno, lo que hace que el efecto funcione particularmente bien es el "fondo adjunto: arreglado"; propiedad para detener el desplazamiento en segundo plano.

Si descarga Firebug para Firefox, puede inspeccionar los div's y observar cómo el CSS hace que la página se comporte e intente replicarlo usted mismo.

Realmente bonito efecto mirando debo admitir :-)

Fuente

2010-03-10 18:37:19

¿Cómo se crea este efecto de imagen?

Respuesta

Cuestiones relacionadas