Question

...我正在使用我在互联网上找到的一些Parallax代码，它似乎适用于Mac上的所有浏览器（Safari，Opera，Chrome，Firefox）。但它在PC上的Chrome中并没有像预期的那样工作 - 当你滚动浏览它时（使用鼠标滚轮），这是不稳定的。我无法弄清楚如何解决这个问题以及我在网上找到的东西似乎没什么帮助。我粘贴了与Parallax效果相关的所有代码。请注意，像文字和来源这样的东西我会把＆＃34; ...＆＃34;保持隐私和机密。

第一个视差HTML

    <div class="row bgParallax" id="home1" data-speed="4"><img class="img-responsive" style="margin-right: auto; margin-left: auto;" src=“..." alt="" width="464" height="295" />
 <div class="panel panel-default col-md-6 col-md-offset-3">
  <div class="panel-heading">
   <h2 class="text-center”>...</h2>
  </div>
  <div class="panel-body">
   <p style="margin-top: 20px;”>...</p>
  </div>
 </div>
 <div class="col-md-4 col-md-offset-4 text-center">
  <p class="textDown”>...</p>
  <span class="glyphicon glyphicon-download"><!-- Down Arrow --></span></div>
</div>

第二视差HTML

    <div id="home2" class="row bgParallax" data-speed="6">
 <div class="col-md-6">
  <div class="panel panel-default">
   <div class="panel-body" style="padding: 25px!important;">
    <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src=“..." width="100%" height="150" allowfullscreen="allowfullscreen"></iframe></div>
   </div>
  </div>
 </div>
 <div class="col-md-6">
  <div class="panel panel-default">
   <div class="panel-body" style="padding: 25px!important;">
    <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src=“..." width="100%" height="150" allowfullscreen="allowfullscreen"></iframe></div>
   </div>
  </div>
 </div>
</div>

CSS

    .bgParallax { 
position: relative;  
background-position: 50% 0; background-repeat: repeat; 
background-attachment: fixed; 
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
-webkit-background-attachment: fixed;
-moz-background-attachment: fixed;
-o-background-attachment: fixed;
-ms-background-attachment: fixed;
}

.bg-1 {
background: url('....jpg') 50% 0 fixed; 
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
     height: 1000px;
    position: relative; 
    padding: 100px 0;
background-attachment: fixed;
-webkit-background-attachment: fixed;
-moz-background-attachment: fixed;
-o-background-attachment: fixed;
-ms-background-attachment: fixed;
}
.bg-2 { 
background: url('...') 50% 0 fixed; 
background-repeat: no-repeat;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
     height: 800px;
    position: relative; 
    padding: 150px 0;
background-attachment: fixed;
}

JS

$('div.bgParallax').each(function(){
  var $obj = $(this);
  $(window).scroll(function() {
    var yPos = -($(window).scrollTop() / $obj.data('speed'));
    var bgpos = '50% '+ yPos + 'px';
    $obj.css('background-position', bgpos );
  });
});

网站链接：http://peaceandplentyinn.mybnbwebsite.com/

视差在Chrome中抖动的问题

0 个答案: