Блог

У меня проблема с двумя images . У меня есть 1 изображение (мы rucab) и парень в качестве второго изображения. Я использую intersection observer , чтобы сначала показать изображение we are 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 Hombre-05.png" data-src="img/Ilustracion Hombre-05.png" width="100%">
        </div>
            <img class="we-are-rucab-img show-bottom" style="z-index: -1000 !important;" src="img/Letras We are Rucab-06.png" data-src="img/Letras We are Rucab-06.png" width="100%" title="We are RUCAB" alt="We are RUCAB">

          </div>
  

CSS

Контейнер Img:

 .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 Intersection observer (Наблюдатель пересечения):

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