Question

我有移动的视差元素覆盖一个大的标题图像，但我似乎无法弄清楚如何将两者分开，以使标题图像不受视差运动的影响。

我希望滚动时只有圆圈向上移动，但看起来标题图像与黑色圆圈的运动相同。

我尝试过的东西正在尝试

<div class="background">...</div>

以外的

<div class="parallax">...</div>

但随后圆圈不再覆盖标题图片。

这是我的JSFiddle：https://jsfiddle.net/uk0x33mj/3/

谢谢 - 我非常感谢你的帮助！

Answer 1

据我所知，你需要这样的东西。如果您还需要别的东西，请告诉我。

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:9999;
}

.parallax__layer--base {
  transform: translateZ(0);
}

.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}

.circle {
  position:absolute;
  top:400px;
  left:300px;
  color:#ffffff;
}

.circle_2 {
  position:absolute;
  top:300px;
}

.background {
  background:red;
  background-image: url('http://i59.tinypic.com/2eofekz.jpg');
  background-size: cover;
  height: 350px;
  width: 100%;
  position: fixed;
}

.spacer {
  height:1000px;   
}

<div class="background">
  </div>

<div class="parallax">
    
    <div class="parallax__layer parallax__layer--back">
        <svg class="circle_2" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="576px" height="576px" viewBox="0 0 576 576" enable-background="new 0 0 576 576" xml:space="preserve">
        <circle fill="#EC008C" cx="63.215" cy="61.778" r="41.83"/>
        </svg>
    </div>
    
    <div class="parallax__layer parallax__layer--base">
        <svg class="circle" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="576px" height="576px" viewBox="0 0 576 576" enable-background="new 0 0 576 576" xml:space="preserve">
        <circle fill="#231F20" cx="63.215" cy="61.778" r="41.83"/>
        </svg>
    </div>
      
  <div class="spacer"></div>
      
</div>

如何从标题中分离视差元素？

1 个答案: