創建堆疊的圖像視差

Question

我試圖創建一個視差效果，需要4個圖像，並且當您向下滾動頁面時，4個圖像開始彼此堆疊。這是一個在Smokey Bones Website上合併的漢堡的視覺示例。這是一個比我想要提供一些視覺洞察力更復雜的例子。我非常熟悉Javascript，Jquery等，只需要一些想法如何開始這個過程中的數學部分或任何例子。

Answer 1

這裏有一個小提琴證明的基本思想：http://jsfiddle.net/reblace/z8P56/1

我只是用偏移圖像的線性函數：

$("#img1").css({top: (scroll)*100 + 'px' }); 

很明顯，你可以用這種方式獲得更復雜。理想情況下，您應該從頁面本身獲取頁面高度等內容，而不僅僅是對其進行硬編碼。

要注意的另一件事是，真正的視差公式更復雜，涉及三角和從視圖位置繪製對象的相對距離和角度。我在這個例子中使用的線性函數是一種簡化，您可能爲了Web的目的而避免這種簡化。

基本上，你想要根據值的範圍和值的範圍來考慮它...即。滾動位置是從0到5000px，並且圖像我想從0到100px。因此，如果域爲[0，5000]，範圍爲[0，100]，我會將域映射到從0到1的範圍，然後將其擴展到從0到100，即。 imagePos =（scrollPos/5000）* 100

如果我反而想將0-5000的滾動位置映射到10-50的圖像位置，我必須縮放並移動前面的公式，即。 imagePos =（scrollPos/5000）* 40 + 10

在縮放和移位之前，您可以通過反轉0-1刻度來反轉滾動（從50到10） imagePos =（1 - （scrollPos/5000））* 40 + 10

我想你可以通過玩這些例子來獲得想要的效果。

更新：這是一個稍微複雜的小提琴，其評論使用更穩健的方法計算正確的滾動範圍和窗口高度。此外，這一個演示了圖像的反轉滾動：http://jsfiddle.net/reblace/z8P56/4。