Поместить параллакс при наведении на изображение внутри div? - PullRequest
Новая
       51

Поместить параллакс при наведении на изображение внутри div?

1 голос
/ 16 мая 2019

У меня есть секция параллакса, над которой у меня есть текст и фоновое изображение CSS. Проблема, с которой я сталкиваюсь, заключается в том, что секция не сидит на одном уровне внутри моего div / header, а еще хуже, когда я использую position: absolute. Мне интересно, есть ли способ, которым я могу наложить свой раздел заголовка так, чтобы изображение находилось сзади с текстом сверху, а затем с параллаксом сверху? Я безуспешно пытался выполнить z-индексацию, секция параллакса просто сидит в углу моего заголовка.

Я пытаюсь добиться чего-то вроде этого: https://www.byalicelee.com/slack, но с фоновым изображением CSS и текстом внутри. Я постараюсь составить кодекс, чтобы уточнить, но пока вот что у меня есть: 

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
header {
  height: 100vh;
  background-image: url(img/image.png);
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  z-index: 0;
}

header .row {
  width: 1150px;
}

header .new-section__white {
  background-color: transparent;
  justify-content: center;
}

.hero {
  width: 100vw;
}

.hero h2 {
  font-weight: 100;
  font-size: 20px;
}

.hero img {
  width: 100%;
}

header .section-parallax {
  /*    position: absolute;*/
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.js"></script>
<header>
  <!-- ~~~ HEADER -->
  <section class="hero new-section__white">
    <div class="row new-section__inner">
      <div class="col span-1-of-2">
        <h1>Some Text - Page Title</h1>
      </div>
    </div>
  </section>
  <!-- ~~~ parallax -->
  <section class="section-parallax">
    <div id="scene">
      <div data-depth="0.2">
        <img class="yellow" src="resources/img/p1.png" alt="parallax header">
      </div>
      <div data-depth="0.4">
        <img class="purple" src="resources/img/p2.png" alt="parallax header">
      </div>
      <div data-depth="0.6">
        <img class="window" src="resources/img/p3.png" alt="parallax header">
      </div>
      <div data-depth="0.2">
        <img class="windowsquare" src="resources/img/p4.png" alt="parallax header">
      </div>
      <div data-depth="0.4">
        <img class="circle2" src="resources/img/p5.png" alt="parallax header">
      </div>
    </div>
  </section>
</header>
...