作一個既能帶來視覺衝突的，又簡單的佈局並不簡單，由於兩者之間的特性是相互排斥的。利用先進的技術設計一個帶有視覺衝突的效果，每每會犧牲簡單的處理方法。今天，我決定作一個插件，讓你作到既能保持簡單性又能給你的網頁添加酷炫的滾動效果。那麼，如今就讓我來介紹jQuery實現的傾斜頁面滾動(jQuery Tilted Page Scroll)。 css
jQuery Tilted Page Scroll 是一個插件能夠將你的html代碼包裝成帶有傾斜頁面滾動效果的3D佈局。這個效果實現的概念相似於個人一個插件——One Page Scroll。但在這種狀況下，它是原始的，因此它在不少設備上都是兼容的。 html
注意：jQuery Tilted Page Scroll這個插件已經在Chrome、Firefox、Safari，在桌面和手機測試過。但在IE上沒有檢測過。 jquery
(源代碼請在原著的頁面上下載啦~) git
使用Tilted Page Scroll github
它是如何運做的？ web
首先第一件事，這個插件會偵查何時每一個元素都出如今了視窗裏。而爲了實現這個，我必須綁定一個方法監聽頁面滾動，那麼它就能夠實現每一個元素的循環而且實時監測滾動條的位置。這個運算過程使用了$(window).scrollTop來跟蹤滾動條所在位置，而且比較它和每一個元素的topOffset頂部偏移量。若是scrollTop的值大於元素的頂部偏移量，那麼就意味着元素在這個視窗裏，而後我將會爲它添加類名來表示它。 api
一旦完成了上面的步驟，那就根據用戶的頁面滾動位置來計算透明度、尺寸以及傾斜角度。這個過程花了我好幾個小時的來嘗試，才找到完美的計算方法，但最終我找到了一個基於這個插件實現思想的解決方案。 app
首先，要完成的計算有：在方程式中，利用一個變量存放scrollTop()的值，以及傾斜角度、透明度和尺寸，而它們將由頂部偏移量、元素部分的高度和窗口的高度決定。我也必須定義一個最小的值，所以它們就不會超出有效的範圍（例如，透明度opacity必須是0-1之間的值）。當全部的數據準備就緒，簡單地使用CSS opacity和CSS3 tranform調用它。 iphone
那麼，這個插件將會經過監聽頁面的滾動行爲改變佈局。 函數
使用說明
爲了使用這個插件，你須要在你的html文檔的<head>中引入最新的jQuery庫，jQuery.tiltedpage_scroll.js以及tiltedpage_scroll.css，後二者能夠在這裏找到。
如今，準備好你的html標籤，以下所示：
HTML:
<body>
..
<div class="main">
<section class="page1">
...
</section>
<section class="page2">
...
</section>
...
<section class="last-page">
...
</section>
</div>
..
</body>
每一個section的類名不是強制要求要寫的，可是它能夠方便你給它們添加CSS樣式。每個section表明一頁，而且在裏面的任何內容將會動態變化。作完上述事情後，像下面那樣調用函數：
JS:
$(".main").tiltedpage_scroll({ sectionContainer: "> section", angle: 50, opacity: true, scale: true, outAnimation: true });
就是這樣了！上述的設置可讓你有一個默認的格局，它可讓你運行好幾分鐘。對於那些正在尋找方法來定製這個插件的人，別急。我在下面提供了一些建議給大家：
- sectionContainer(section容器):若是你不想在你的佈局裏使用section，你能夠用CSS選擇器。例如，你想選擇.main下的下一級div標籤，可使用">div"（選擇子元素）。它的默認值是">section"。
- angle(傾斜度)：當你的容器出如今視窗內，你能夠設置你的容器的傾斜度。若是你須要更加細微的效果，那就嘗試着把它的值減少到10。它的默認值是50。
- opacity(透明度)：當section正出如今視窗內時，透明度會跟着逐漸增大。你能夠設置它的值爲false。它的值默認爲true。
- scale(尺寸)：當你滾動頁面的時候，section的尺寸會逐漸增大。若是你不想要這個效果，能夠將它的值設置爲false。它的默認值爲true。
- outAnimation(離開動畫)：這個選項能夠容許你啓用或者關閉離開動畫，當section返方向離開視窗(section向上消失)。設置它的值爲false，將實現只在section進入視窗時展示效果。它的默認值爲true。
-----------------------------------------------------分割線-----------------------------------------------------
這個是我偶然在關注的一個微博帳號裏發現的一篇外國文章。這個插件能實現的效果，建議仍是去原創文章那裏看一下做者的DEMO
雖然我特意搜索了一下標題，看看是否有人已經翻譯了。而我發現有一個網站已經將該文章翻譯了（心裏有點小失落），不過我很想嘗試一下翻譯一篇外國的技術文章，因此但願看到這篇翻譯的人，若是以爲我翻譯得很差，請及時指出~~~謝謝啦~~接下來，我也得嘗試一下這個插件！
翻譯：http://www.uedsc.com/create-a-cool-3d-tilted-layout-with-tilted-page-scroll.html
原創：http://www.onextrapixel.com/2014/03/13/create-a-cool-3d-tilted-layout-with-tilted-page-scroll/