translateZ Parallax Scrolling не работает - PullRequest
Новая
       38

translateZ Parallax Scrolling не работает

0 голосов
/ 18 июня 2019

Я пытаюсь создать страницу с простыми параллаксными секциями с чистым CSS.Я применил perspective к элементу body и preserve-3d к контейнерам разделов, но фоновые изображения не прокручиваются с меньшей скоростью, они просто прокручиваются нормально.

HTML: 

<div class="p-section">
    <div class="content"></div>
    <div class="bg"></div>
</div>
<div class="p-section">
    <div class="content"></div>
    <div class="bg"></div>
</div>
<div class="p-section">
    <div class="content"></div>
    <div class="bg"></div>
</div>

CSS: 

body {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    perspective: 10px;
}
.p-section {
    transform-style: preserve-3d;
    height: 100vh;
    position: relative;
}
.content,
.bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.bg {
    transform: translateZ(-10px) scale(2);
}

Вот CodePen .

1 Ответ

0 голосов
/ 18 июня 2019

perspective не работает при применении к элементу body.Вам нужно обернуть свои разделы в содержащий элемент и применить к этому perspective.

HTML 

<div class="p-container">   
    <div class="p-section">
        <div class="content"></div>
        <div class="bg"></div>
    </div>
    <div class="p-section">
        <div class="content"></div>
        <div class="bg"></div>
    </div>
    <div class="p-section">
        <div class="content"></div>
        <div class="bg"></div>
    </div>
</div>

CSS 

.p-container {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    perspective: 10px;
}

Пример CodePen

...