Эффект параллакса CSS: Как мне преобразовать только фон раздела? - PullRequest
Новая
       6

Эффект параллакса CSS: Как мне преобразовать только фон раздела?

0 голосов
/ 06 июня 2018

Мне удалось создать эффект параллакса CSS для фона раздела, заставляя его прокручиваться медленнее, чем его окружение.Чтобы быть более точным, он добавляет translateZ ко всему разделу, который перекрывается всеми остальными разделами.

И вот моя проблема с этим: я не хочу, чтобы весь раздел прокручивался медленнее, чем остальные, я только хочу, чтобы фоновое изображение делало это.Заголовок над ним должен нормально прокручиваться.

Как добавить эффект параллакса на фоновое изображение, пока все остальные элементы раздела остаются без эффекта прокрутки?

Вот что я имею в виду: 

.wrap {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 2px;
}

.section {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
    background: #fff;
    height: 50vh;
}

.section-content {
    background: rgba(255, 255, 255, 0.5);
    padding: 0 15px;
    z-index: 100;
}

.parallax {
    transform: translateZ(-1px) scale(2);
    z-index: 90;
}

.background {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 80;
}

.background-image {
    position: absolute;
    width: 100%;
}

.section .background img {
    width: 100%;
    top: -50vh;
    z-index: 90;
}
<div class="wrap">

    <div class="section section-md">
        <div class="section-content">
            Hello World
        </div>
    </div>

    <div class=" section parallax">
        <div class="background ">
            <div class="background-image">
                <img src="http://story-teller-photography.de/upload/outland/convert/c857a6dc02e0e048a12d91f58cbeec39_1800_0.jpg">
            </div>
        </div>
        <div class="section-content">
            <h2>Heading</h2>
        </div>
    </div>

    <div class="section">
        <div class="section-content">
            Hello World
        </div>
    </div>

    <div class="section">
        <div class="section-content">
            Hello World
        </div>
    </div>

</div>

1 Ответ

0 голосов
/ 06 июня 2018

попробуйте добавить класс "параллакс" в "фон", а не в "раздел". 

.wrap {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 2px;
}

.section {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: #fff;
  height: 50vh;
}

.section-content {
  background: rgba(255, 255, 255, 0.5);
  padding: 0 15px;
  z-index: 100;
}

.parallax {
  transform: translateZ(-1px) scale(2);
  z-index: 90;
}

.background {
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 80;
}

.background-image {
  position: absolute;
  width: 100%;
}

.section .background img {
  width: 100%;
  top: -50vh;
  z-index: 90;
}
<div class="wrap">

  <div class="section section-md">
    <div class="section-content">
      Hello World
    </div>
  </div>

  <div class=" section ">
    <div class="background parallax">
      <div class="background-image ">
        <img src="http://story-teller-photography.de/upload/outland/convert/c857a6dc02e0e048a12d91f58cbeec39_1800_0.jpg">
      </div>
    </div>
    <div class="section-content">
      <h2>Heading</h2>
    </div>
  </div>

  <div class="section">
    <div class="section-content">
      Hello World
    </div>
  </div>

  <div class="section">
    <div class="section-content">
      Hello World
    </div>
  </div>

</div>
...