はじめに
こんにちは！@70days_jsです。
cssで簡単にパララックス風サイトを再現してみました。
今日は37日目。(2019/11/24)
よろしくお願いします。
サイトURL
https://sin2cos21.github.io/day37.html
やったこと
cssで簡単にパララックス風サイトを作れるという記事をみたので早速やってみました。
とても手軽に実装できます。htmlもcssもシンプルです。
htmlは以下のように、ページ単位でdivに分けます。（one-pageクラスがついてるdiv)
<body>
<div class="one-page page-zero">
<p>桃太郎</p>
</div>
<div class="one-page page-one">
<p>むかしむかし、あるところに</p>
</div>
<div class="one-page page-two">
<p>お爺さんとお婆さんがいました。</p>
</div>
<div class="one-page page-three">
<p>お爺さんは山へ芝刈りへ。</p>
<p>お婆さんは川へ洗濯へ。</p>
</div>
<div class="one-page page-four">
<p>すると、お婆さん。</p>
<p>洗濯をしていると川から桃が流れてきました。</p>
</div>
<div class="one-page page-five">
<p>私、桃はあんまり好きじゃないなぁ。</p>
<p>お婆さんは桃を無視しました。</p>
</div>
<div class="one-page page-six">
<p>二人はその後も幸せに暮らしましたとさ。</p>
<p>おしまい。</p>
</div>
</body>
cssの重要な部分 ↓
.one-page {
width: 100vw;
height: 100vh;
position: sticky;
top: 0;
}
これで.one-pageクラスのついた部分は縦横いっぱいなので1ページみたいに見えます。
そしてpositionがstickyなので、スクロールしてtopの位置が0になった時にfixedとなり、パララックスのように見えるというわけです。
そのあとは各ページごと（divごと）にz-indexをつけて重なる順序を指定して、他のスタイルを調整して終わりです。↓
.page-zero {
z-index: 0;
background-color: rgba(150, 100, 50, 1);
}
.page-one {
z-index: 1;
background-color: rgba(50, 0, 0, 1);
}
...
感想
以前javascriptでパララックスサイトを作ろうとして失敗した経験があったので、こんなに簡単に実装できて驚いています。
パララックスにも色々タイプがあるみたいなので、他のタイプのも年末までにやってみたいですね。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
参考
- たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方 - WPJ (https://www.webprofessional.jp/js-library-scrollreveal-2/)
とても分かりやすかったです。ありがとうございます！