Question

我试图修改由skeurentjes制作的视差示例http://jsfiddle.net/aloisdg/WT8zX/。

我的问题是它会自动将图片定位在top:0 如何将视差图像放在页面下方的相对div中？

Answer 1

谢谢你们！这是工作代码。

$(window).scroll(function(e) {
  parallax();
});

function parallax() {
  var scrolled = $(window).scrollTop();
  $('.parallax-image').css('background-position-y', (scrolled * -0.9) + 'px');
}

.object-holder {
  height: 500px;
  width: 500px;
  color: white;
  font-size: 20px;
}

.parallax-image {
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbOopZtL-YdKY1qBHUPWlVDYm0ITcO4kJg6QjuG2z-yg5-xRHu5w") no-repeat;
  background-size: 100% auto;
  width: 500px;
  height: 500px;
  z-index: -1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="object-holder">
  <div class="parallax-image">hi</div>
</div>

Answer 2

*编辑：刚刚意识到原版中的背景绝对定位。

因此，您希望将图像添加为背景图像，然后使用背景位置移动它。

创建另一个div并将其放置在页面流中，给它一个类，比如相对背景。

然后将jQuery更改为：

$(window).scroll(function(e){
  parallax();
});

function parallax(){
  var scrolled = $(window).scrollTop();
  $('.relative-background').css('background-position', 'center' -(scrolled*0.15)+'px'); // changing the class here
}

您可能需要调整0.15值，并可能添加文档高度百分比的偏移量，因此它只会移动到页面的一部分。

如何在相对DIV中应用视差效果

2 个答案: