CSS圖片跟隨滾輪漂浮是一個非常流行的網頁設計技巧。通過使用CSS和JavaScript代碼實現,可以讓圖片在頁面上自由地移動,跟隨著用戶的滾輪而滑動。
下面是一個簡單的示例代碼:
html, body { height: 100%; margin: 0; padding: 0; } .container { position: relative; height: 2000px; } .image { position: absolute; top: 50%; width: 100%; max-width: 100%; transform: translateY(-50%); } @media (max-width: 768px) { .image { width: auto; height: 100%; max-width: none; max-height: none; } }
上面的代碼中,我們使用了CSS的定位和變換功能,將圖片設置為絕對定位,并使其與容器垂直居中。此外,我們還添加了一個媒體查詢,以確保在小屏幕上圖片不會超出容器。
在JavaScript代碼中,我們添加了一個滾動事件的監聽器,以便在用戶滾動頁面時移動圖片。我們使用pageYOffset屬性來獲取當前頁面的滾動位置,并將圖片中心的縱向偏移量設置為當前滾動位置的一部分,以實現滾動時圖片跟隨滑動的效果。