css - Nic Gallagher 的 CSS 伪元素视差效果转垂直

Question

请不要使用 jQuery/插件解决方案

尝试将 Nicolas Gallagher 的视差演示从水平方向转换为垂直方向。前两个链接是原来的横向demo；第二个 jsFiddle 是我尝试将其转换为垂直

Here is Nic's original demo - for reference only

jsFiddle of Nic's original horizontal demo - for reference only

jsFiddle attempting to convert demo to vertical - FIXING THIS ONE

经过几个小时的修修补补，我没主意了。此时，我所要做的就是将图像对齐到屏幕的右侧并扩展 View 。

我没有成功地让垂直视差发挥作用。 如您所见，我正在尝试使用 css 伪元素来完成所有这些工作 - 但如果这是使其工作的最佳方式，我愿意接受一些 javascript/jQuery。

#silverback {
  position: relative;
  z-index: 1;
  min-width: 200px;
  min-height: 1800px;
  padding: 120px 0px 50px;
  background: #d3ff99 url(http://i59.tinypic.com/4q60dh.png) 100% -10px repeat-y;
}
#silverback:before,
#silverback:after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 100px;
}
#silverback:before {
  content: '';
  vertical-align:text-top;
  background: transparent url(http://i58.tinypic.com/4toj7o.png) 100% 300px repeat-y;
}
#silverback:after {
  content: '';
  vertical-align:text-bottom;
  background: transparent url(http://i60.tinypic.com/103s9j7.png) 100% 70px repeat-y;
}

我很确定答案与每个伪/元素的 background 属性有关。在最初的水平演示中，-10/70/300 是产生视差效果的原因。

所以我试过了(见上面的第二个 jsFiddle):

-10px / 70px / 300px

-10% / 70% / 300%

将每个设置为 100%/repeat-y 可以使所有内容在右侧很好地对齐。

Answer 1

高度无法固定。在原始示例中，宽度是自动的，这是产生这种效果的因素之一。

所以你必须添加 height: 100%; 到 #silverback。

http://jsfiddle.net/AcG96/

---

I am open to a bit of javascript/jQuery if that is the best way to make it work.

与我的 fiddle 中的 CSS 相同，但还添加:

window.addEventListener('scroll', function(e){
  document.getElementById('silverback').style.paddingTop = document.body.scrollTop + 'px';
});

http://jsfiddle.net/AcG96/1/

你应该从你的 CSS 中的固定位置开始，然后在 javascript 中切换到绝对位置，这样你的背景保持固定并在禁用 javascript 时覆盖窗口。