CSS varios fondos de desplazamiento a diferentes velocidades

Question

me encontré con este sitio Web hoy y estaba desconcertado: http://www.actionbutton.net/

¿Es que el uso de algún tipo de técnica conocida por sus orígenes que se desplazan a una velocidad diferente y se superponen entre sí. Miré la fuente, pero estoy bastante confundido. ¿Alguien sabe cómo se llama la técnica y cómo aprenderla?

Answer 1

Es llamada parallax Hay un montón de plugin para esto p. Ej. http://www.ianlunn.co.uk/plugins/jquery-parallax/

Answer 2

También podría considerar algo por el estilo (no se requiere javascript):

@keyframes backgroundscroller { 
    from { 
    background-position: 0% 0%;  
    } 
    to { 
    background-position: 500% 500%, 400% 400%, 300% 300%, 200% 200%, 100% 100%;  
    } 
} 

#yourdivid { 
    background-image: url('full/sprite1.png'), url('512/sprite2.png'), url('256/sprite3.png'), url('128/sprite4.png'), url('64/sprite5.png'); 

    animation-name: backgroundscroller; 
    animation-duration: 300s; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-direction: normal; 
} 

Es obvio que hay que tener en cuenta que esto sólo funcionará con los navegadores que soportan CSS3 y que también desee considerar incluidos un javascript muy útil que se encarga de agregar prefijos donde y si es necesario: http://leaverou.github.com/prefixfree/

Answer 3

Aquí hay una aproximación del efecto de paralaje que no usa JS (por lo tanto, los fondos se desplazan a velocidad constante). El ejemplo jfiddle: http://jsfiddle.net/MFC9B/2/

clave es que hay un 2-capa divs anidados, la exterior para sostener el fondo, la interior para mantener el contenido:

.section {   
    position:relative; 
    z-index:1; 
    height:500px; 
    width:100%; 
    background-attachment:fixed; /* this keeps the background in place */ 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
} 
.content { 
    position:relative; 
    z-index:2; 
    background-color:#fff; 
    border:2px solid #666;  
    height:50%; /* this height difference allows the bg to show through */  
}