Question

我有视差背景，用javascript以一定的速度移动。我需要将文本放在那些背景div中，因此每个背景都有自己的文本块。但是，当我把文本放在页面顶部时，尽管它位于容器中。这些职位需要改变，但我不确定究竟是什么。有什么想法吗？

HTML

 <div id='hero'>
  <div class='layer-bg layer' data-depth='0.10' data-type='parallax'>
    <img class="logo" />
  </div>
  <div class='layer-1 layer' data-depth='0.20' data-type='parallax'>

  </div>
  <div class="relative">
    <div class='layer-2 layer' data-depth='0.30' data-type='parallax'>
      <div class="video">
        Text
       </div>
     </div>
  </div>
 <div class='layer-3 layer' data-depth='0.40' data-type='parallax'></div>
</div>
<div id='hero-mobile'></div>

CSS

body {
    padding: 0;
    margin: 0;
    background-color: $bronze;
    font-family: 'Playfair Display', serif;
    color: $white;
}
// 
#hero {
    height: $heroHeight;
    overflow: hidden;
    position: relative;
}
#content {
    background-color: $bronze;
}
.layer {
    background-position: bottom center;
    background-size: auto;
    background-repeat: no-repeat;
    width: 100%;
    height: $heroHeight;
    position: fixed;
    z-index: -1;
}


.first-section {
    padding: 50px 0 20px 0;
}
.text-header {
    font-size: 50px;
    text-align: center;
}
h1 {
    line-height: 120%;
    margin-bottom: 30px;
}
p {
    color: #ede0d5;
    font-size: 18px;
    line-height: 150%;
}

// #hero, .layer {
//  min-height: 800px;
// }

.layer-bg {
    background-image: url('');
  height: 4000px!important;
  background-position: top center;
  width: 100%;
}
.layer-1 {
    background-image: url('
        ');
  height: 3000px;
        }
.layer-2 {
    background-image: url('');
   height: 5500px;
}
.layer-3 {
    background-image: url('
        ');
      height: 8000px;
        }
.layer-4 {
    background-image: url('
        ');
    background-position: center bottom;

        }
.layer-overlay {
    background-image: url('
        ');

        }
.relative {
  position: relative;
}
.logo {
  margin: 0px auto;
  max-width: 600px;
  margin-top: 100px;
  display: block;
}

JS

(function() {

  window.addEventListener('scroll', function(event) {
    var depth, i, layer, layers, len, movement, topDistance, translate3d;
    topDistance = this.pageYOffset;
    layers = document.querySelectorAll("[data-type='parallax']");
    for (i = 0, len = layers.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;}
      layer = layers[i];
      depth = layer.getAttribute('data-depth');
      movement = -(topDistance * depth);
      translate3d = 'translate3d(0, ' + movement + 'px, 0)';
      layer.style['-webkit-transform'] = translate3d;
      layer.style['-moz-transform'] = translate3d;
      layer.style['-ms-transform'] = translate3d;
      layer.style['-o-transform'] = translate3d;
      layer.style.transform = translate3d;
    }
window.CP.exitedLoop(1);

  });

}).call(this);

Answer 1

我不是为什么你在CSS中使用8000px高度而是

检查链接可能会对您有所帮助 https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

Answer 2

这是因为你fixed每个.layer类div的位置，这就是为什么它们都与你的DOM处于同一位置的原因。

主overflow: hidden;

的div #hero

<强>解决方案

您必须删除fixed课程.layer和overflow: hidden;的{{1}}位置。

示例： - 请参阅fiddle

与里面文本的视差背景

2 个答案: