スプリットスクリーンレイアウト
画面全体をバチコーンと分割したレイアウトをスプリットスクリーンレイアウトといい、オシャレなサイトでよく使われている印象です。
スプリットレイアウトと言われているときもあり正式名称は謎です。
実装
今回は画面を二分割した上で、片方のコンテンツがスクロールしている間、もう片方はページ上部にくっついているものを実装してみました。
SP幅（とりま749px以下）では１カラムにし、PC表示ではタイトルとテキストエリアを交互にしています。
See the Pen Untitled by MAKI I (@IKEMAKI) on CodePen.
（１カラム表示になる場合は、0.5xにするかCODEPEN上でご覧くださいm(_ _)m）
文章が入ることでHTMLが見づらいかもしれませんが、
<h2>ページのタイトル</h2>
<ul>
<li><h3>タイトル</h3><p>テキスト</p></li>
<li><h3>タイトル</h3><p>テキスト</p></li>
</ul>
<div>空のセクション</div>
内容はこれだけです。
ポイントとしては以下のような感じです。
-
position:stickyとtop:0でくっつける。heightを指定しないとくっつかない - 横並びはflexbox
-
orderでPCとSPの並び順を変える
PCの偶数行は左右を入れ替えたく、本当は余計な入れ子を増やさずflexやgridでうまくできないかなーと思ったのですが、
orderを使うには指定しないといけないしなーということでリスト要素にしました。
より賢いやり方があれば教えてくださいませ。
終わりに
stickyが普通に使えるようになって、jsを使わなくてもこういう表現ができるようになったのはとってもハッピーですね。
前後のセクションなど他の要素に干渉しないのも好印象です。
次はjsと組み合わせて、スクロールによってアニメーション発火するさらにオサレな感じでやってみようかと思います。
それでは！👋