視差滾動/滑鼠滾動

滑鼠滾動

視差 parallax

目標物體距離越近就有越大的視差，可以被用來反向估算物體的距離．

視差滾動是一種網站趨勢，其中背景內容（即圖像）在滾動時以不同於前景內容的速度移動。單擊下面的鏈接可以查看具有和不具有視差滾動的網站之間的區別。

最簡易的視差滾動

一般來說，滾動捲軸會讓背景跟著捲走，但利用背景固定的效果，捲軸動的時候，文字也動了，但背景沒動，就會有滾動視差的感覺．

Amos教學

background-attachment: fixed; 時，你的背景將會使用視窗可見範圍(viewport)當作定位空間，所以一旦設定了 fixed 之後，你的圖片位置就會跑到預設的視窗左上角去了，但請注意，淺黃色區塊內的圖片雖然位置跑到視窗左上角去，但超過區塊空間範圍以外的部分，是看不到的喔

W3School教學 Parallax Scrolling demo

figma 設計 Parallax-animation视差动画 - 夜空

網路教學說明 figma视差动画 | 智能动画 | Smart Animate

//www.bilibili.com/video/BV1XG411E7Fv/

由近到遠的感覺

設計稿 https://www.figma.com/community/file/1160558853941633178

圖片 freepik EPS檔案格式

滑鼠滾動判斷

參考網址ㄅ	筆記
用簡單的 CSS 和 JavaScript 輕鬆製造視差滾動（Parallax Scrolling 神Ｑ超人
Day 6 Side Project : Scroll Animation 滾動動畫	利用滑鼠滾輪來控制BOX從左右兩邊交叉的出現