/* 換頁的過場動畫（首頁 ↔ 作品集、活動預定 → 首頁）離開一頁時，畫面會被幾片直向色塊由上往下一格一格蓋掉。色塊裡放的就是「目的地那一頁的起始畫面」，所以蓋滿的那一刻畫面已經等於目的地，接下來真正換頁的空檔看不出來，新頁面直接接手播它自己的進場動畫。到站後不做任何事——色塊只負責蓋上這一段。往作品集：色塊 = 作品集頁的背景（同一張 bg.jpg、同一層暗色遮罩、同樣 1.125 倍放大）往首頁　：色塊 = 純黑（見下面的 .to-home），首頁本來就是從全黑淡進來的有過場的頁面都要載入這支樣式，而且裡都要有 #page-transition 那段 HTML。色塊數量改了的話，--slices 和 HTML 裡的數量要一起改。 */ :root { --slices: 8; /* 幾片色塊 */ --slice-dur: 0.3s; /* 單片的動畫長度 */ --slice-step: 0.035s; /* 每片之間差多久 */ } #page-transition { position: fixed; inset: 0; z-index: 9000; display: flex; visibility: hidden; /* 平常完全不出現，只有過場時才顯形 */ pointer-events: none; /* 任何時候都不擋點擊 */ } #page-transition .slice { position: relative; flex: 1 1 0; overflow: hidden; clip-path: inset(0 0 100% 0); /* 預設是完全收起來的 */ } /* 照片層。每一片裝的都是「整張」背景，再往左推自己那一格的距離，所以跨越所有色塊看起來會是連續的同一張圖，而不是八張各自的小圖。 */ #page-transition .slice::before { content: ''; position: absolute; top: 0; left: calc(var(--i) * -100vw / var(--slices)); width: 100vw; height: 100%; background: url("../../images/bg.jpg") center / cover no-repeat; transform: scale(1.125); /* 對齊頁面上 #bg:after 的放大倍率 */ } /* 暗色遮罩層，疊在照片上面，對齊頁面上的 #bg:before */ #page-transition .slice::after { content: ''; position: absolute; inset: 0; background-color: rgba(19, 21, 25, 0.7); background-image: url("../../images/overlay.png"); background-position: calc(var(--i) * -100vw / var(--slices)) 0; background-repeat: repeat; } /* 往首頁的時候色塊改成純黑。首頁自己的進場本來就是從全黑淡進背景（main.css 的 body.is-preload #bg:before），所以蓋滿的黑畫面可以無縫交棒給它。 */ html.to-home #page-transition .slice::before { display: none; } html.to-home #page-transition .slice::after { background-color: #000000; background-image: none; } /* ---------- 蓋上：由上往下一格一格 ---------- */ html.is-leaving #page-transition { visibility: visible; } html.is-leaving #page-transition .slice { animation: slice-cover var(--slice-dur) ease-in forwards; animation-delay: calc(var(--i) * var(--slice-step)); } @keyframes slice-cover { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } } /* 使用者關閉動態效果就整個不做（transition.js 也會直接跳轉） */ @media (prefers-reduced-motion: reduce) { #page-transition { display: none; } }