フルスクリーンコンテンツをCSSで！

最近のRECの記事は食べ物の記事が多いですよね。
そこで、今回はCSSの小技についてご紹介します。

フルスクリーンコンテンツ

みなさんはフルスクリーンコンテンツを使用したサイトをご覧になったことはありますでしょうか？
こんな感じのやつです。

このようなフルスクリーンでスクロールごとにコンテンツが切り替わるサイトについては、これまでは、「fullPage.js」や「scrollify」など、JSのプラグインを使用して実装していました。
それが、なんと、CSSのみで実装できると聞いては黙っちゃいられない。
これまでの苦労はなんだったんだ！
ということで、筆者が試しに実装してみたので、ご紹介します。

HTML

なんの変哲もないHTMLですね。
今回、フルページで切り替わるのはsectionタグの部分です。
ポイントとしては、sectionタグをdiv.wrapで囲っていること。
そして、sectionタグに共通クラス.sectionを付与していることくらいです。

CSS

次にCSSを見ていきましよう。
解説コメントも入れましたので、よろしければご覧ください。

さて、今回の肝となるCSSです。
ポイントは以下の2つのプロパティです。

・scroll-snap-type：横軸か縦軸か、スナップするかを決める。（親要素にあてる）
・scroll-snap-align：どの位置にスナップするかを決める。（子要素に適用する）

たったこれだけです。
非常に簡単です。
ほんとに、これまでの苦労はなんだったんだろうか。。。

しかもこの、scroll-snapプロパティ、ベンダープレフィックスを入れることで、IEやEdgeでもいけるようです！

また、素晴らしい点としてはJSでスクロールを制御しなくてもいいことです。
スクロール制御を下手にやってしまうとユーザーに大変なストレスを与えてることに繋がります。
scroll-snapはスクロールを制御するものではありませんので、ユーザーとしてはいつもと同じ感覚でスクロールできるということになります。

scroll-snap、いかがでしたでしょうか。
多用することはなさそうですが、使い用途によっては頼もしい味方になってくれそうです！
さあ、みなさんもご一緒に、scroll-snapしましょう!!