CSS sfondi multipli di scorrimento a velocità diverse

Question

mi sono imbattuto in questo sito oggi e mi è stato disorientato: http://www.actionbutton.net/

sta usando qualche tipo di tecnica nota per i suoi sfondi che scorrono ad una velocità diversa e si sovrappongono l'un l'altro. Ho guardato la fonte ma sono abbastanza confuso. Qualcuno sa come viene chiamata la tecnica e come impararla?

Answer 1

È la chiamata parallax per questo c'è un gran numero di plugin per es. http://www.ianlunn.co.uk/plugins/jquery-parallax/

Answer 2

Si potrebbe anche prendere in considerazione qualcosa di simile (non è richiesto alcun 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; 
} 

Ovviamente si deve essere consapevoli che questo funziona solo con i browser che supportano CSS3 e anche prendere in considerazione tra cui un javascript molto utile che si occupa di aggiungere prefissi dove e se necessario: http://leaverou.github.com/prefixfree/

Answer 3

Ecco un'approssimazione dell'effetto di parallasse che non utilizza JS (quindi gli sfondi scorrono a velocità costante). L'esempio jfiddle: http://jsfiddle.net/MFC9B/2/

chiave è che v'è un 2-layer div annidati, quella esterna per contenere il fondo, quello interno per contenere il contenuto:

.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 */  
}