Question

我正在尝试在我的代码中实现视差效果，因为我正在使用视差js。我希望我的页面图像在我将鼠标悬停在它们上时开始随着数据标量x和数据标量值移动，但它们的表现不一样。我第一次使用parallax.js时，我真的不知道我的代码有什么问题。

指向我的Codepen的链接是https://codepen.io/asinha/pen/BZQdxW。

＆＃13;

$(document).ready(function() {
  //alert("hello");
  makeWinHeight();
});

var makeWinHeight = function() {
  var vh = $(window).height();
  $('#scene').height(vh);
  var tabs = vh / 2 + vh / 4;
  $('#tab a,#scene.col,img').height(tabs);
}

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

＆＃13;

img {
  width: 100%;
  position: relative;
}

.image {
  padding: 2% 2%;
}

＆＃13;

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

</head>

<body>
  <section id="scene" data-pointer-events="true" data-depth="1.00" data-origin-x="0.00" data-origin-y="0.00" data-scalar-x="100.00" data-sacalar-y="105.00" data-friction-x="0.05" data-friction-y="0.05">
    <div class="main">
      <div class="layer col-md-12 row tab">

        <a href="#">
          <div class="col-md-4 image">
            <img src="http://publicdomainarchive.com/wp-content/uploads/2016/01/public-domain-images-free-stock-photos-002-1000x667.jpg">
          </div>
          <div class="col-md-4 image">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT67u-Nbax1CScuoXegUoVbDElmwMBr8viXk4nKo1pbgxqJEWxZSg">
          </div>
          <div class="col-md-4 image">
            <img src="https://www.w3schools.com/css/trolltunga.jpg">
          </div>
        </a>
      </div>
      <div class="layer col-md-12 row tab">

        <a href="#">
          <div class="col-md-4 image">
            <img src="http://publicdomainarchive.com/wp-content/uploads/2016/01/public-domain-images-free-stock-photos-002-1000x667.jpg">
          </div>
          <div class="col-md-4 image">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT67u-Nbax1CScuoXegUoVbDElmwMBr8viXk4nKo1pbgxqJEWxZSg">
          </div>
          <div class="col-md-4 image">
            <img src="https://www.w3schools.com/css/trolltunga.jpg">
          </div>
        </a>
      </div>
    </div>
  </section>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>
  <script type="text/javascript" src="scripts.js"></script>
</body>

</html>

＆＃13;

Parallax js with bootstrap

0 个答案: