Question

我遇到两个images的问题。我有1个图片（我们是rucab），另一个人是第二个图片。我正在使用intersection observer首先显示我们是rucab图片，然后是男生图片。问题是当家伙出现时，我们将rucab保持在前面，我希望我们是rucab图像返回，并且家伙出现在前面，将响应，大小和所有位置保持在同一位置。我尝试过与z-index absolute positioning一起玩，但是效果不佳。您可以看到一个示例here。

<div class="img-container col-lg-7">
        <div class="jumping">
      <img class="top superman active" alt="" src="img/Ilustracion%20Hombre-05.png" data-src="img/Ilustracion%20Hombre-05.png" width="100%">
        </div>
            <img class="we-are-rucab-img show-bottom" style="z-index: -1000 !important;" src="img/Letras%20We%20are%20Rucab-06.png" data-src="img/Letras%20We%20are%20Rucab-06.png" width="100%" title="We are RUCAB" alt="We are RUCAB">

          </div>

CSS

图片容器：

.img-container {
    padding-top: 35px;
    position: relative;
    margin-right: -2px !important;
    background: linear-gradient(90deg, transparent 42%, #fbc00c 42%);
}

第一个图片（我们是rucab）：

   .we-are-rucab-img {outline: 1px solid transparent;opacity: 0; transition: 1s opacity;}
.we-are-rucab-img.show-bottom {opacity: 1;  
  animation: movefromtop 1s alternate infinite;
  animation-iteration-count: 1;
  animation-fill-mode:  forwards;}
@keyframes movefromtop {
  from {
    transform: translateY(-5em);
  }
  to {
    transform: translateY(0em);
  }
}

第二张图片（人）：

      .superman {opacity: 0; transition: 1s opacity;}
.superman.active {opacity: 1;  
  animation: movefrombottom 1s infinite;
  animation-iteration-count: 1;
  }

@keyframes movefrombottom {
  from {
    transform: translateY(5em);
  }
  to {
    transform: translateY(0em);
  }
}

JS交叉观察器：

// Instantiate a new Intersection Observer

let observer10 = new IntersectionObserver(onEntry10);

let element10 = document.querySelector(".home-button");
observer10.observe(element10);

let superman = document.querySelector('.superman');

function onEntry10(entry10) {
  if (entry10[0].isIntersecting) {
      setTimeout(function() {
    superman.classList.add("active");
    }, 300);
  }
}

// Instantiate a new Intersection Observer

let observer9 = new IntersectionObserver(onEntry9);

let element9 = document.querySelector(".home-button");
observer9.observe(element9);

let werucab = document.querySelector('.we-are-rucab-img');

function onEntry9(entry9) {
  if (entry9[0].isIntersecting) {
    werucab.classList.add("show-bottom");
  }
}

覆盖第二张图片的z-index

0 个答案: