CSS视差效果:如何仅转换部分的背景?

时间:2018-06-06 16:21:22

标签: html css parallax

我设法为一个部分的背景创建一个CSS视差效果,使其滚动速度比周围环境慢。 更确切地说,它为整个部分添加了一个translateZ,它与所有其他部分重叠。

这就是我的问题:我不希望整个部分比其他部分滚动得慢,我只想要背景图像来做到这一点。它上面的标题应正常滚动。

如何在背景图像上添加视差效果,而该部分的所有其他元素保持不会有任何滚动效果?

这是我的意思:

  WITH src AS (
    SELECT '2000' AS y FROM DUAL UNION ALL
    SELECT '1991' AS y FROM DUAL UNION ALL
    SELECT '20--' AS y FROM DUAL UNION ALL
    SELECT '09' AS y FROM DUAL UNION ALL
    SELECT '11' AS y FROM DUAL UNION ALL
    SELECT '95' AS y FROM DUAL
  )
  SELECT s.y, TO_NUMBER(REGEXP_SUBSTR(s.y, '^\d+$'))
    FROM src s;
.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;
}

1 个答案:

答案 0 :(得分:0)

尝试添加" parallax"上课到"背景"而不是"部分"。



.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>
&#13;
&#13;
&#13;