/* ========================================================== section-transition.css ---------------------------------------------------------- ★練習8で新しく作ったファイル★(トップページ専用) セクションの境目が「バツン」と切れて見えないようにするためのCSS。 トップページを上から見たときの、境目ごとの使い分け: 1. ファーストビュー → 縦書きの文章 … そのまま(同じ動画なので境目なし) 2. 縦書きの文章(暗い動画) → こだわり … ① ふんわり(和紙が透けていく) 3. こだわり → お品書き … 重なるスクロール＋② 波 (★練習10で影→波に変更) 4. お品書き → 店内の案内 … 重なるスクロール＋② 波 5. 店内の案内 → 新着情報 … ① ふんわりだけ (★練習15で重なりをやめた) 6. Instagram → フッター(暗い動画) … ① ふんわり 使っている主な技: ・mask-image(マスク) … 要素の「見える・見えない」を画像やグラデーションで決める。 黒いところは見えて、透明なところは消える。 linear-gradient で「透明→黒」にすると、端がふんわり消えていく。 (Safari用に -webkit- 付きも一緒に書いている) ・clip-path: polygon(...)(切り抜き) … 点を並べて囲んだ形だけを表示する。点を波の形に並べると、 端が波の形に切り抜かれる。 ・position: sticky(重なるスクロール) … スクロールしても、決めた位置でその場に止まる。 止まっている間に、次のセクションが上に重なってくる。 ========================================================== */ /* ========================================================== 【いちばん大事な準備】ページ全体の overflow-x を clip にする ---------------------------------------------------------- style.css で html と body に「overflow-x: hidden」(横にはみ出した 部分を隠す)を指定している。ところが hidden を使うと、ブラウザは body を「中身をスクロールさせる箱」として扱うようになり、 その中にある position: sticky が効かなくなってしまう (セクションが止まらず、そのまま流れていく)。 「overflow-x: clip」なら、hidden と同じように横のはみ出しを 隠せるうえに、スクロールさせる箱にはならないので、sticky が効く。 hidden と clip を続けて2行書いているのは、古いブラウザのため。 clip を知らない古いブラウザは2行目を無視して hidden のまま (重なる動きはしないが、今まで通りの表示)になり、 新しいブラウザは後に書いた clip が使われる。 ========================================================== */ html, body { overflow-x: hidden; overflow-x: clip; } /* ========================================================== 【準備】こだわり・お品書きに、それぞれ和紙の背景を持たせる ---------------------------------------------------------- 今までは、親の箱(.concept-group)に和紙の背景を1枚だけ敷いていた。 重なるスクロールでは、セクションが重なったときに下が透けないよう、 それぞれのセクションが自分の背景を持っている必要があるので、 親の背景はやめて、各セクションに同じ和紙の背景を付け直す。 ========================================================== */ .concept-group { /* overflow: hidden があると position: sticky が効かなくなるため、 はみ出しを隠す指定を解除する */ overflow: visible; background-color: transparent; } /* 親の箱に敷いていた、ぼかした和紙の背景は使わない */ .concept-group::before { display: none; } /* こだわり・お品書きを「重なるカード」にする */ .ingredients, .concept { position: sticky; /* スクロールしても止まる(止まる位置topはJSで計算) */ top: 0; /* JSが動く前の仮の値 */ overflow: hidden; /* 下で敷く、ぼかした背景のはみ出しを隠す */ background-color: #f4f2ee; /* 和紙の画像が読み込めないときの保険の色 */ } /* 重なる順番(数字が大きいほど手前) こだわり(1) → お品書き(2) → 店内の案内(3) の順に上へ重なる */ .ingredients { z-index: 1; } .concept { z-index: 2; } /* 各セクションに、ぼかした和紙の背景を敷く(今までと同じ見た目) */ .ingredients::before, .concept::before { content: ""; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; /* ★練習11で変更★ 以前は opening-washi-bg.jpg を filter: blur(6px) で その場でぼかしていたが、スクロールのたびにぼかしの計算が走って PCで動きが重くなっていたので、あらかじめぼかした画像 (opening-washi-bg-blur.jpg)に差し替え、filter を外した。 見た目は同じ。 */ background-image: url("images/opening-washi-bg-blur.jpg"); background-size: cover; background-position: center; z-index: 0; } /* 中身は、背景より手前に出す */ .ingredients > *, .concept > * { position: relative; z-index: 1; } /* ========================================================== 境目2:縦書きの文章(暗い動画) → こだわり … ① ふんわり ---------------------------------------------------------- こだわりのセクションを、上に220pxだけ広げて(margin-topをマイナス) 暗い動画の上にかぶせる。その広げた部分を、mask-image で 「上は透明 → 下へ行くほど見える」ようにして、和紙がふんわり 現れるようにしている。 (padding-top を増やしているのは、文字がふんわりの部分に 入らないようにするため。元の余白60pxに220pxを足している) ========================================================== */ .ingredients { margin-top: -220px; padding-top: calc(60px + 220px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 220px); mask-image: linear-gradient(to bottom, transparent 0, #000 220px); } /* ========================================================== 境目3:こだわり → お品書き … 重なるスクロール＋② 波 ---------------------------------------------------------- ★練習10で変更★ 以前は上向きの影だけだったが、 店内の案内と同じように、上の端を波の形に切り抜くようにした。 (波の形が全部同じだと単調なので、少しずらした形にしている) 作り方は、下の「境目4」の説明を見てください。 ========================================================== */ .concept { margin-top: -24px; /* ★練習11で変更★ 波の切り抜きは、下の「波の帯(::after)」に移した */ } /* ========================================================== 境目4:お品書き → 店内の案内 … 重なるスクロール＋② 波 ---------------------------------------------------------- 店内の案内の上の端を、clip-path で波の形に切り抜く。 ・x は横の位置(%)、y は上からの距離(px)。 ・y が 0〜24px の間でゆるく上下して、波になっている。 ・最後の「100% 100%, 0% 100%」で、下の端はまっすぐのまま。 波の深さ(24px)の分だけ margin-top をマイナスにして、 お品書きにかぶせている(すき間ができないように)。 ※波の形を変えたいときは、y(px)の数字を変えるとできます。 ========================================================== */ .interior-preview { position: sticky; /* ★練習10で変更★ 新着情報が上に重なってくるよう、ここも止める */ top: 0; /* 止まる位置はJSで計算 */ z-index: 3; /* こだわり(1)・お品書き(2)より手前 */ margin-top: -24px; background-color: #2b2620; /* 写真のすき間から下が透けないための保険の色 */ clip-path: polygon( 0% 12px, 2% 14px, 4% 16px, 6% 18px, 8% 20px, 10% 22px, 12% 23px, 14% 24px, 16% 24px, 18% 24px, 20% 23px, 22% 23px, 24% 21px, 26% 20px, 28% 18px, 30% 16px, 32% 14px, 34% 11px, 36% 9px, 38% 7px, 40% 5px, 42% 3px, 44% 2px, 46% 1px, 48% 0px, 50% 0px, 52% 0px, 54% 1px, 56% 2px, 58% 3px, 60% 5px, 62% 7px, 64% 9px, 66% 11px, 68% 14px, 70% 16px, 72% 18px, 74% 20px, 76% 21px, 78% 23px, 80% 23px, 82% 24px, 84% 24px, 86% 24px, 88% 23px, 90% 22px, 92% 20px, 94% 18px, 96% 16px, 98% 14px, 100% 12px, 100% 100%, 0% 100% ); } /* ========================================================== 境目5:店内の案内 → 新着情報 … 重なるスクロール＋② 波 境目6:Instagram → フッター(暗い動画) … ① ふんわり ---------------------------------------------------------- 新着情報＋Instagramの箱(.news-insta-group)に、 ・上の端:4と同じ作り方の波(形を少しずらして単調にならないように) ・下の端:mask-image で、下へ行くほど透明になるふんわり の両方を付けている。 ========================================================== */ .news-insta-group { position: relative; /* 重なる順番(z-index)を効かせるため */ z-index: 4; /* 店内の案内(3)・フッターより手前 */ margin-top: -24px; /* ★練習11で変更★ 波の切り抜きは、下の「波の帯(::after)」に移した */ /* 下の180pxを、フッターの上にかぶせてふんわり消す */ margin-bottom: -180px; padding-bottom: 180px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%); } /* フッターの上の方は、上の和紙がかぶさってふんわり消えていく部分なので、 中身(文字)がそこに入らないよう、上の余白を180px増やしておく (元の余白は80px) */ footer { padding-top: calc(80px + 180px); } /* ========================================================== 下になったセクションを、少しずつ暗くする「幕」 ---------------------------------------------------------- section-transition.js が、こだわり・お品書き・店内の案内の中に
を追加して、 スクロールに合わせて opacity(濃さ)を 0 → 0.45 に変えている。 次のセクションが重なってくるほど、下のセクションが暗くなり、 奥へ沈んでいくように見える。 ========================================================== */ .stack-shade { position: absolute; inset: 0; /* 上下左右いっぱいに広げる */ background-color: #000; opacity: 0; /* 最初は透明(JSで濃くしていく) */ pointer-events: none; /* 幕がボタンのクリックを邪魔しないように */ z-index: 50; /* 中身より手前に重ねる */ } /* ========================================================== ★練習10で追加★ 店内の案内(スマホ)の見出しの上の余白 ---------------------------------------------------------- 上の端を波の形(深さ24px)で切り抜いているので、 「OUR INTERIOR」が波に近く、窮屈に見えていた。 波の形はそのままで、見出しの上の余白だけを 20px → 60px に広げている(style.css の .hero-mobile__label を上書き)。 ========================================================== */ .hero-mobile__label { padding-top: 60px; } /* ========================================================== ★練習11で追加★ 動きを軽くするための指定 ---------------------------------------------------------- will-change: transform … 「この要素はスクロールで動きます」とブラウザに先に伝えておく。 ブラウザは、この要素をパソコンのグラフィック担当の部品(GPU)で 描くように準備するので、重なるときの動きがなめらかになる。 (たくさんの要素に付けると逆に重くなるので、 重なるスクロールの4つだけに付けている) ========================================================== */ .ingredients, .concept, .interior-preview, .news-insta-group { will-change: transform; } /* ========================================================== ★練習11で追加★ 波を「小さな帯」で描く(動きを軽くするため) ---------------------------------------------------------- 練習10までは、お品書き・新着情報のセクション「全体」を clip-path で波の形に切り抜いていた。ところが、大きな要素を 切り抜いたまま重なるスクロールで動かすと、PCでは描き直しの 計算が重くなり、動きが悪くなる原因になっていた。 そこで、 ・セクションの一番上の24px(波の部分)は、背景を透明にしておく ・その24pxの中に、和紙と同じ色の「波の帯(::after)」を置き、 切り抜くのは、この小さな帯だけにする ・和紙の背景(::before)は、波の下(上から24px)から始める という作り方に変えた。見た目は練習10と同じで、 切り抜く面積がぐっと小さくなるので、動きが軽くなる。 和紙の色 #f1f1f0 は、ぼかした和紙の画像の平均の色。 (和紙の模様はぼかしてあってほぼ均一なので、境目は見えない) ※店内の案内は、上の部分が写真で単色では描けないため、 今まで通りセクション全体を切り抜いている。 ========================================================== */ /* セクション自体の背景色は透明に(上の24pxから前のセクションが見えるように) */ .concept, .news-insta-group { background-color: transparent; } /* 和紙の背景を、波の下(上から24px)から敷く */ .concept::before, .news-insta-group::before { top: 24px; left: 0; right: 0; bottom: 0; } /* 波の帯(高さ24px) */ .concept::after, .news-insta-group::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 25px; /* 1pxだけ和紙に重ねて、すき間が出ないようにする */ background-color: #f1f1f0; /* 和紙と同じ色 */ z-index: 0; pointer-events: none; } .concept::after { clip-path: polygon( 0% 11px, 2% 9px, 4% 7px, 6% 5px, 8% 3px, 10% 2px, 12% 1px, 14% 0px, 16% 0px, 18% 0px, 20% 1px, 22% 2px, 24% 3px, 26% 5px, 28% 7px, 30% 9px, 32% 11px, 34% 13px, 36% 16px, 38% 18px, 40% 20px, 42% 21px, 44% 22px, 46% 23px, 48% 24px, 50% 24px, 52% 24px, 54% 23px, 56% 22px, 58% 20px, 60% 18px, 62% 16px, 64% 14px, 66% 12px, 68% 10px, 70% 8px, 72% 6px, 74% 4px, 76% 2px, 78% 1px, 80% 0px, 82% 0px, 84% 0px, 86% 1px, 88% 1px, 90% 3px, 92% 4px, 94% 6px, 96% 8px, 98% 10px, 100% 13px, 100% 100%, 0% 100% ); } .news-insta-group::after { clip-path: polygon( 0% 24px, 2% 24px, 4% 23px, 6% 22px, 8% 21px, 10% 19px, 12% 17px, 14% 15px, 16% 12px, 18% 10px, 20% 8px, 22% 6px, 24% 4px, 26% 3px, 28% 1px, 30% 0px, 32% 0px, 34% 0px, 36% 0px, 38% 1px, 40% 3px, 42% 4px, 44% 6px, 46% 8px, 48% 10px, 50% 12px, 52% 15px, 54% 17px, 56% 19px, 58% 20px, 60% 22px, 62% 23px, 64% 24px, 66% 24px, 68% 24px, 70% 23px, 72% 22px, 74% 21px, 76% 19px, 78% 17px, 80% 15px, 82% 13px, 84% 11px, 86% 9px, 88% 7px, 90% 5px, 92% 3px, 94% 2px, 96% 1px, 98% 0px, 100% 0px, 100% 100%, 0% 100% ); } /* 新着情報の箱は、ぼかしのはみ出しを隠すために overflow: hidden に なっていたが、ぼかし済みの画像に変えたので不要。 (このままだと、上の24pxの外側が切れることはないが念のため解除) */ .news-insta-group { overflow: visible; } /* お品書きを暗くする幕も、波の下から始める (上の24pxは前のセクションが見えている部分なので、暗くしない) */ .concept .stack-shade { top: 24px; } /* ========================================================== ★練習14で変更★ 境目5:店内の案内 → 新着情報 を「波」から「ふんわり」へ ---------------------------------------------------------- ・上の端の波(::after の帯)は使わないので消す。 ・mask-image を「上も下もふんわり」にする。 上の160px:透明 → だんだん見える(店内の案内に溶け込む) 下の180px:だんだん透明(フッターの動画に溶け込む ※今まで通り) ・上の160pxは文字が入ると読みにくいので、上の余白(padding-top)を 160px増やして、「NEWS 新着情報」の見出しがふんわりの部分より 下に来るようにしている(窮屈に見えないように)。 ・和紙の背景(::before)も、波の帯の分(24px)下げていたのを、 一番上から敷くように戻す。 ========================================================== */ .news-insta-group { margin-top: 0; padding-top: 160px; -webkit-mask-image: linear-gradient( to bottom, transparent 0, #000 160px, #000 calc(100% - 180px), transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0, #000 160px, #000 calc(100% - 180px), transparent 100% ); } .news-insta-group::after { display: none; } .news-insta-group::before { top: 0; } /* ========================================================== ★練習15で変更★ 店内の案内 → 新着情報 は、重ねずにグラデーションだけ ---------------------------------------------------------- 店内の案内を止める(sticky)のをやめて、ふつうに流れるようにした。 これで新着情報は上に重なってこず、店内の案内のすぐ下に続き、 境目は練習14で付けた「ふんわり」(新着情報の上160px)でつながる。 ========================================================== */ .interior-preview { position: relative; will-change: auto; /* 動かさなくなったので、GPUの準備も不要 */ } .news-insta-group { will-change: auto; } /* 新着情報の上の「ふんわり」部分(160px)を、店内の案内の下の端に重ねる。 重ねないと、ふんわり透けた部分から、店内の案内ではなく その後ろ(お店の動画や、止まっているお品書き)が見えてしまうため。 また、店内の案内(z-index:3)より手前に来るよう、z-indexを大きくしている。 */ .news-insta-group { margin-top: -160px; z-index: 5; } /* 上で新着情報を160px重ねたぶん、店内の案内の一番下(「詳しくはこちら」ボタン)が ふんわり部分に入って薄く見えてしまう。店内の案内の下に余白を足して、 ボタンがふんわり部分より上に来るようにしている。 */ .interior-preview { padding-bottom: 140px; }