Question

我今天遇到了这个网站，我感到很神秘：http://www.actionbutton.net/

他是否使用某种已知技术作为他的背景，以不同的速度滚动并相互重叠。我查看了源代码，但我很困惑。有谁知道这种技术被称为什么以及如何学习它？

Answer 1

这是不使用JS的视差效果的近似值（因此背景以恒定速度滚动）。 jfiddle示例：http://jsfiddle.net/MFC9B/2/

关键是有一个2层嵌套的div，外面的一个用于保存背景，内部用于保存内容：

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

Answer 2

这是致电parallax这里有足够的plugin例如http://www.ianlunn.co.uk/plugins/jquery-parallax/

Answer 3

你也可以考虑这样的事情（不需要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;  
}

显然你必须意识到这只适用于支持CSS3的浏览器，你还想考虑包含一个非常有用的javascript，它可以在需要的地方添加前缀：{{3 }}

CSS多个背景以不同的速度滚动

3 个答案: