這個網站是如何創建這樣一個流暢的滾動來查看動畫？

Question

這個Website如何實現這樣一個美麗的滾動視圖效果？我的意思是背景圖像的正確滑動「蒙版」。

Answer 1

當可見時，它似乎動畫顯示clip或wrapper的寬度。 可能帶有類似Waypoints.js的東西。

https://github.com/imakewebthings/waypoints

具有光滑定義緩動和右定時。他們還使用滾動上的parallax，使其更平滑。

VERRY（檸）檸quikcly：

<div class="wrapper"> 
    <img ...> 
</div> 

// CSS 

.wrapper { 
    width: 300px; 
    height: 500px; 
    overflow: hidden; 
} 

.wrapper.visible { 
    width: 500px; 
    transition: width 1s ease-out; 
} 

img { 
    width: 500px; 
    height: 500px; 
}