apple product on scroll

參考以下頁面仿製，並借用部份素材(如有不當請告知 🙇‍♂️)
https://www.apple.com/tw/iphone-se/
https://www.gogoro.com/tw/smartscooter/viva/

商品具多顏色選擇時，使用這個呈現方式視覺上和使用者體驗都不錯
除了讓畫面簡單乾淨，也能帶上產品大標做為特色說明~

apple new iphone se color
如上 tag 所示~，這個特效需要用到下面這些功能

position sticky:
鎖住部份區塊(section) 達成視差捲動
css inset
最關鍵的遮罩效果，用後層蓋住前層
完全覆蓋: clip-path: inset(100% 0px 0px 0px);
不覆蓋: clip-path: inset(0% 0px 0px 0px);
ps: 以上為水平效果
scroll, requestAnimationFrame
配合上面，每個 frame 檢查 scroll 位置以此計算遮罩百分比

先看看下面的效果~

以上
這樣的效果需要多個容器來組合完成
html architecture
由外至內逐一說明~

.color-section
是整個特效的主容器，定義整個區塊可捲動範圍(也就是有幾個過場區塊/畫面) 例如有三個產品區塊該容器的高度最少應該是...


    height: calc(3 * 100vh);

    /* 也可以額外加入一些高度做為捲動 buffer，減緩 product 區塊的出場時間 */
    height: calc((3 * 100vh) + 100vh);

.sticky-container
完成 sticky(fixed) 功能的容器
別忘了一個過場區塊高度等於使用者裝置高度(100vh)
.stack-container
把多個過場區塊堆疊在一個畫面內的容器
.product _1 ~ _3
product 過場區塊/畫面用容器
包含 product 說明文字和大圖
在這個區塊可以加入更多的花式效果讓畫面更有趣 🙄

架構透視圖
再接著看下一個範例~

並沒有將所有部份像 apple 官網一樣處理的很好，部份畫面上的小問題尚待解決
有另外處理 screen notch 問題(詳細影響請看註 Notch)
notch effect
未去除 notch 時頭尾有空白區域
has notch
去除 notch 後令圖片滿版
without notch

簡單在 html head meta content 內加入 viewport-fit=cover


 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

另外還需要處理 padding safe area，避免文字被手機裝置 notch 蓋住


    padding:
        max(calc(env(safe-area-inset-top) + 10px), 20px)
        max(calc(env(safe-area-inset-right) + 1%), 3%)
        max(calc(env(safe-area-inset-bottom) + 10px), 20px)
        max(calc(env(safe-area-inset-left) + 1%), 3%);

上面 padding 因網頁設計和調整個人喜歡做調整，所以用到 calc() 和 max()

apple product on scroll effects

先看看下面的效果~