如何进行纯 css 视差滚动?

Question

我试过了，但没有按预期工作。 请解释我需要添加什么才能使其正常工作！我不想使用任何JS代码。

body {
transform-style: preserve-3d;
perspective:3px;
}
#a {
height:300px;
transform: translateZ(-1);
}
#b {
height:350px;
transform: translateZ(-2);
}

https://jsfiddle.net/8uor3d07/

我必须添加什么才能在div a 和div b 之间使用 CSS3 获得视差效果？

Answer 1

使用 z索引在 z 轴上堆叠元素。这仍然需要一些修饰，但主要效果就在那里。

body {
margin: 0 auto;
color: red;
}
#aaa {
height: 300px;
background: url("http://www.palmbeachbookfestival.com/wp-content/uploads/2014/11/palm-tree-beach-island-blue-ocean-sand_095462.jpg");
background-attachment: fixed;
background-size: cover;
z-index: 1;
}
#bbb {
height: 750px;
background: #131418;
z-index: 2;
}
#ccc {
height: 750px;
background: url("https://unsplash.it/800/900");
background-attachment: fixed;
background-size: cover;
z-index: 3;
}
#ddd {
height: 750px;
background: #131418;
z-index: 4;
}
#eee {
height: 750px;
background: url("https://unsplash.it/700/900");
background-attachment: fixed;
background-size: cover;
z-index: 5;
}
div p {
font-size: 20px;
margin: 0 auto;
padding: 1em;
text-align: justify;
}

<div id="aaa">
<p>Lorem ipsum dolor sit amet, soleat vulputate ei nec, at sea persecuti reprehendunt, solum essent incorrupte has no. Munere laoreet alienum ut his, est sint primis cu. Id case primis facilisis eos, pro ut mutat luptatum pertinax. Mea an possit delenit.
At nec legere adversarium. Quem deleniti at sit, ei duo decore democritum. Ex per dico offendit accommodare, mea quidam possim numquam ut. Te commune disputando pri, vis nonumy nostro commune te. Id mel unum porro, aliquip patrioque sed ad, vitae
eripuit pertinacia pri ne. Tantas soleat vulputate in sea.</p>
</div>
<div id="bbb">
<p>Lorem ipsum dolor sit amet, soleat vulputate ei nec, at sea persecuti reprehendunt, solum essent incorrupte has no. Munere laoreet alienum ut his, est sint primis cu. Id case primis facilisis eos, pro ut mutat luptatum pertinax. Mea an possit delenit.
At nec legere adversarium. Quem deleniti at sit, ei duo decore democritum. Ex per dico offendit accommodare, mea quidam possim numquam ut. Te commune disputando pri, vis nonumy nostro commune te. Id mel unum porro, aliquip patrioque sed ad, vitae
eripuit pertinacia pri ne. Tantas soleat vulputate in sea.</p>
</div>
<div id="ccc">
<p>Lorem ipsum dolor sit amet, soleat vulputate ei nec, at sea persecuti reprehendunt, solum essent incorrupte has no. Munere laoreet alienum ut his, est sint primis cu. Id case primis facilisis eos, pro ut mutat luptatum pertinax. Mea an possit delenit.
At nec legere adversarium. Quem deleniti at sit, ei duo decore democritum. Ex per dico offendit accommodare, mea quidam possim numquam ut. Te commune disputando pri, vis nonumy nostro commune te. Id mel unum porro, aliquip patrioque sed ad, vitae
eripuit pertinacia pri ne. Tantas soleat vulputate in sea.</p>
</div>
<div id="ddd">
<p>Lorem ipsum dolor sit amet, soleat vulputate ei nec, at sea persecuti reprehendunt, solum essent incorrupte has no. Munere laoreet alienum ut his, est sint primis cu. Id case primis facilisis eos, pro ut mutat luptatum pertinax. Mea an possit delenit.
At nec legere adversarium. Quem deleniti at sit, ei duo decore democritum. Ex per dico offendit accommodare, mea quidam possim numquam ut. Te commune disputando pri, vis nonumy nostro commune te. Id mel unum porro, aliquip patrioque sed ad, vitae
eripuit pertinacia pri ne. Tantas soleat vulputate in sea.</p>
</div>
<div id="eee">
<p>Lorem ipsum dolor sit amet, soleat vulputate ei nec, at sea persecuti reprehendunt, solum essent incorrupte has no. Munere laoreet alienum ut his, est sint primis cu. Id case primis facilisis eos, pro ut mutat luptatum pertinax. Mea an possit delenit.
At nec legere adversarium. Quem deleniti at sit, ei duo decore democritum. Ex per dico offendit accommodare, mea quidam possim numquam ut. Te commune disputando pri, vis nonumy nostro commune te. Id mel unum porro, aliquip patrioque sed ad, vitae
eripuit pertinacia pri ne. Tantas soleat vulputate in sea.</p>
</div>