どのように純粋な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-indexを使用すると、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>