滾動視差-3D

網址連接：ripple.com/xrp

偶然間翻出一個以前收藏的網站，被開始的這個landing效果驚到了。我爲何會收藏這個網站？！我對他的業務彷佛是沒有絲毫興趣，那我一定是被這炫酷（炫酷？）的視覺效果吸引了。

和一般看到的視差滾動（滑動相同距離相同，但不一樣的元素移動不一樣的距離）效果不一樣。當你用鼠標滾動時，它給人一種從桌面上到移動到桌面下的視覺效果。對我來講，應該是講是第一次看到這種效果的視差滾動。

剛開始我猜想應該是在canvas中實現的，懷着個人猜測，我自信的按下了option+command+I！當打開console的一瞬間我驚了，不是canvas,徹底沒有，居然是用div疊加而成的！

懷着好奇之心，我決定扒一扒背後的原理。

扒原理

總共6個不一樣的部分，分別爲一個div，總的能夠分爲兩個部分

1. 地面上的網 -> 桌面（只有一個桌面，也就只有一個div）
2. 地面上的物體 -> 桌面上擺放的東西（5個div）

隨着鼠標的滑動

狀況1.能夠觀察到css屬性scaleY(val)中的val值在不斷的變化，從正到負。

能夠理解爲隨着滑動，將桌面對應的div進行Y方向的形變，正 -> 0 -> 負數，最終表現出的效果就是從桌面上移動到桌面下觀察的效果。

狀況2.能夠觀察到css屬性translate3d(x,y,z)中的y值在不斷的改變。可是每個div的變化量是不同的，越靠近屏幕的div變化量越大，越遠則越小。能夠參考prespective這個概念，這樣在滑動的時候就表現出視差的效果。

總結：

桌面進行伸縮變換，桌面上的物體進行平移變換。兩個效果疊加出3D效果的視差滾動。

怎麼作

在知道了基本原理以後，發現其實並不難。想要作出這樣的效果須要知足幾個條件：

1. 設計師須要事先設計出具備相似3D效果的圖形

2. 導出的資源（這裏指png圖片）須要合理的分塊，準切的來將是在Z軸上不一樣深度的圖形須要分別導出

3. 在滾動過程當中，不一樣的深度的分塊在平移速度上須要知足必定的關係（最基本須要知足近快-遠慢），具體的可能須要必定的3d數學計算

4. 一樣"桌面"在進行伸縮變換的時候，其變換量也與滾動距離有必定的關係

其中每一步都影響着最終呈現出的效果。

總結

這篇文章只是一個初步的原理分析，並無提到如何去在代碼中肯定分塊的伸縮量以及平移速度等等。這些須要進一步的去研究思考。暫時尚未去推導不一樣分塊之間的速度關係。 其實最最重要的是想法，仔細看來這原理也不難，主要只用到了兩個css transform屬性。可是讓人以爲很巧妙，並且效果很好。很佩服設計出這種效果的設計師和實現這種效果的前端工程師。