1

我有两个问题images。我有 1 张图片（我们是 rucab）和一个人作为第二张图片。我intersection observer用来首先展示我们是 rucab 形象，然后是家伙形象。问题是当这个人出现时，我们是 rucab 保持在前面，我希望我们是 rucab 图像返回，并且那个人出现在前面，保持响应，尺寸和所有在相同的位置。我试过玩，z-index absolute positioning但效果不好。你可以在这里看到一个例子。

<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");
  }
}
4

0 回答 0