前中後景不同速度移動;滑鼠微幅帶動前景;整區塊釘住,滾動中播放動畫時間軸。
縱向滾動時,整條內容水平移動;每個面板再附加微幅視差,增添層次。
標題與段落使用 clip-path 由左至右揭示,同步背景以較慢速度上移,形成視差。
clip-path
這種做法適合章節開頭,搭配圖片或影片背景,保持內容清晰可讀。
卡片在進入視口時由下往上飛入、淡入,並根據索引添加不同位移,營造空間感。
入場位移 +12%
入場位移 +8%
入場位移 +5%
入場位移 +3%
入場位移 +2%
入場位移 +1%