Result
タイトルでうまく説明できませんでしたけどこういうやつです
パララックスの表現法が出始めた時によく見かけるようになってから今も割と見かけるのである程度定着してる感も無くはないですね
で、これなんですがそう言えばposition: sticky;で出来ますよね、という内容です
css
.container {/*高さを画面一杯にしておく*/ height: 100vh; overflow-x: hidden;}.slide {/*position: sticky;を含めてスタイリング。background-size: cover;を忘れずに*/ position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: flex; justify-content: center; align-items: center; letter-spacing: 0.2em; color: white; background-size: cover; background-position: center;}/*各セクションの背景画像を指定*/#slide1 { background-image: url("hoge.jpg");}#slide2 { background-image: url("huga.jpg");}#slide3 { background-image: url("piyo.jpg");}#slide4 { background-image: url("done.jpg");} |
position: sticky;の動作は以前の記事のposition: sticky;でtableを下スクロール時はヘッダ、横スクロール時は最左を固定をご参照ください
html
<main class="container"> <section class="slide sticky" id="slide1"> <h1>hogehoge</h1> </section> <section class="slide sticky" id="slide2"> <h1>hugahuga</h1> </section> <section class="slide sticky" id="slide3"> <h1>piyopiyo</h1> </section> <section class="slide sticky" id="slide4"> <h1>done</h1> </section></main> |
can i use
position: sticky;のブラウザ対応状況です。実装はある程度問題ないと見て良さそうです
