Stellar.js图像在视图中消失

时间:2017-08-05 06:57:04

标签: javascript css parallax stellar.js

编辑:问题示例:https://codepen.io/wa23/pen/yooGyO 使实时渲染窗口尽可能高,以查看效果。从地球的图片开始滚动,当你到达第3个div时,图像已经移动,因此它几乎完全不在视野范围内。

我有4个div这样:

<div data-stellar-background-ratio="0.5"></div>
<div class="plain"></div>
<div data-stellar-background-ratio="0.5"></div>
<div class="plain"></div>

第一个和第三个矩形div将有一个背景图像,通过Stellar.js进行视差,其他两个不做,IE,它们是交错的。

问题是,当我滚动到第3个div时,恒星js已经将我的背景图像放在了视野之外,两个恒星div都有这个属性:

background-position: 0px 745.5px;这对于第一个div来说很好,因为它已经超出了视图框架,但是不适用于第三个div,因为当你到达那里时,它已经到了背景图像已经被垂直移动了745px。

我尝试使用data-stellar-vertical-offset="some number"使用不同的偏移值,但它在所有视口高度上都不一致。 1900是我的27英寸显示器所需要的,但它需要我的15英寸笔记本电脑的一半。我不知道该怎么办。

1 个答案:

答案 0 :(得分:0)

您在这里回答,更改这些属性,

No.1设置background-attachment: fixed;

div:nth-of-type(odd) { 
  height: 150vh;
  width:100%;
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment: fixed;
}

在js中的No.2,

$.stellar({
horizontalScrolling:false,
scrollProperty: 'transform'
});