“不同”的視差滾動效果

Question

我在我的新投資組合中工作，我想在網站上做這樣的效果：

http://nizoapp.com/

當我們滾動時，iPhone和部件從側面出現的效果。 這是一種視差滾動。

我試圖搜索怎么做，但我找不到。 所以我“偷”了保存頁面和調整代碼的代碼，但似乎有很多不必要的東西。

有人知道我該怎么辦？

Answer 1

視差：由觀察者位置的變化引起的觀察對象的明顯位移。

視差是一種特殊的滾動效果， 例如 ，通過相對滾動來模擬深度。

如果你對滾動效果更感興趣，那么簡單的搜索會產生許多插件和綜合 。

Answer 2

根據我的說法，這里的圖像顯示了這個想法是如何運作的。 基本思想是所有移動的元素與中心/非運動元素有一定距離。 當您滾動更多時，它們與此中心元素的距離會減小 - 反比例。 在這里的圖像中，元素用圓圈和給它們的名稱標記（為簡單起見，只給出一個移動元素，也可以添加其他元素）。 細節如下。

這里的中心元素稱為“A”，移動的元素稱為“C”。 這里使用的變量：

D =>移動元件與A的距離
k =>任何常數> 1（實驗結果良好）
y =>滾動距離（document.body.scrollTop）
dy => A，C之間的垂直距離
dx =>水平dist下注。 A和C.
theta =>（預先確定）A，C之間的角度

C和A之間有一個角度取決於你 - 將它設置為任何數字（弧度是最佳單位）。 現在，隨着y增加，D減少。 因此，D由圖中所示的關系/公式給出。 每次向下/向上滾動時，都會重新計算D. 由此，計算dy，dx並將其設置為C的css的頂部左側屬性（絕對定位）。 如果你想知道如何找到dy，dx，這里是如何做到的。

dy = Math.sin（theta）* D.
dx = Math.cos（theta）* D.

我希望我已經給出了這個想法。 我可以給出完整的代碼，但我希望你做一些事情......如果你想要進一步的幫助，請在評論中詢問...... :)

Answer 3

基本上它使用scroll事件，然后在某些點上它動畫框。