如何使视差响应？

我正在使用jQuery插件plax：https://github.com/cameronmcefee/plax 如何使视差响应？

我做了我自己的例子，并希望它是响应式的。现在，这个位置对于CSS中的移动元素是绝对的，但我需要它是相对的，所以我可以使它响应。

但我不能让它的工作

我认为这个问题是与CSS：

  #shell { 
      display: block; 
      position: relative; 
      margin: 100px auto; 
      width: 100%; 
      max-width: 318px; 
      height: 100%; 
      max-height: 318px; 
      z-index: 1; 
      } 

      #plax-logo { 
      width: 136px; 
      height: 70px; 
      position: absolute; 
      top: 170px; 
      left: 90px; 
      z-index: 3; 
      background:#099; 
      } 

      #plax-sphere-1 { 
      width: 93px; 
      height: 92px; 
      position: absolute; 
      z-index: 4; 
      top: 189px; 
      left: 191px; 
      background: #3CC; 
      } 

      #plax-sphere-2 { 
      width: 215px; 
      height: 215px; 
      position: absolute; 
      z-index: 2; 
      top: 100px; 
      left: 53px; 
      background: #3C9; 
      } 

      #plax-sphere-3 { 
      width: 93px; 
      height: 92px; 
      position: absolute; 
      top: 35px; 
      left: 32px; 
      z-index: 1; 
      background: #669; 
      }

来源

2013-05-01 DWTBC

我想出了自己。

我又增加了CSS串

header img { 
width:100%; 
}

这奏效了

来源

2013-05-04 13:11:16 DWTBC

第一下一次出要做一个敏感的网站，它可能是值得检查出foundation在我看来，这是最好的响应式样板。看到你已经有了一个页面，可能不想重新开始here是一个链接到Stack-overflow的另一篇文章，你可能看起来很有用。欢呼声中，马可

编辑

if($(window).width() < 1670 && $(".banner").height() < 1253) 
{ 
    var bannerContent = $(".title").html() + $(".social").parent().html(); 
    $(".banner").html(bannerContent); 
} 
else 
{ 
    var bodyContent = $(".title").parent().html(); 
    $("body").html(bodyContent); 
}

您可以使用此代码对整个网页缩小其内容。正如你可以看到：如果窗口宽度= < 1670那么这个，否则如果宽度= < 1500那么这等等

来源

2013-05-01 08:01:07

我知道该怎么做响应化布局。但是我似乎无法获得上面提到的视差jQuery插件来使用响应式布局。我对jQuery并不擅长，因此我的问题在这里，所以我真的不知道在从StackOverflow的其他帖子的链接中寻找什么？ – DWTBC 2013-05-01 09:03:32

编辑我的答案。 – 2013-05-01 09:20:55

所以你不认为有可能用css修复它？我会试试这个，并让你知道它是怎么进行的 – DWTBC 2013-05-01 10:45:59

如何使视差响应？

回答

相关问题