CSS multiple backgrounds scrolling at different sp

问题:

I came across this website today and I was mystified: http://www.actionbutton.net/

Is he using some kind of known technique for his backgrounds that scroll at a different rate and overlap each other. I looked at the source but am pretty confused. Does anyone know what the technique is called and how to learn it?

回答1:

It's call parallax there's plenty of plugin for this e.g. http://www.ianlunn.co.uk/plugins/jquery-parallax/

回答2:

Here is an approximation of the parallax effect that doesn't use JS (thus backgrounds are scrolling at constant speed). The jfiddle example: http://jsfiddle.net/MFC9B/2/

Key is that there is a 2-layer nested divs, the outer one to hold the background, the inner one to hold the content:

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

回答3:

You could also consider something like that (no javascript is required):

@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;  
}

Obviously you must be aware that this will work only with browsers that support CSS3 and you also want to consider including a very useful javascript that takes care of adding prefixes where and if needed: http://leaverou.github.com/prefixfree/