解剖視差滾動（下集）

上一集中我們把視差滾動的基本原理講了下，簡單的做下回顧性總結：視差滾動就是一些區域劃分+元素堆疊+錯落的動畫過渡所形成的效果。(*._.*)。

下集了，這次要寫些什麼呢，好困惑自己研究得不是很透徹，明知原理是那樣，可是壘著碼的時候還是要考究一下下的。「跑題一下，我的壘碼習慣是會先把運動的軌跡寫出來，最後才會加運動事件。理由很簡單，從表現到行為的壘碼原則可以讓你更清楚其中的原理，其實所有的行為都是在操作節點、類、屬性等這樣那樣的東東。也只有在明白原理的時候才會壘自己需要的，而不是盲壘」。

好了，回歸主題吧

其實這一次的分享是上一集的拓展，也就是上一集結尾時說到的另一種形式的視差滾動。

下面就來分解一下，同理少不了進行區域的劃分————區域劃分

123

區域1

區域2區域3

在每乙個區域裡都堆一些元素————元素堆疊

例：

123456

最後再給這麼些個元素加一些過渡————錯落的動畫過渡

已把運動軌跡分離出來，這樣做可以很明了自己的運動軌跡是怎樣的，就不用那麼麻煩去看一大段js，只為找到運動了多少個畫素，廢時廢力。

例：

123

4567

891011

1213

1415

1617

.animg

.detail

.detailtitle

.detailtitle-1 /* 拓展動畫類 */

/* 運動軌跡 begin */

.content-focus .animg

.content-focus .detail

.content-focus .detailtitle

.content-focus .detailtitle-1

/* 運動軌跡 end */

那麼行為方面的**跟上一集中用到的基本一致，乙個滾動事件，乙個點選事件，方法很簡單，看看就明白了，這裡就不壘了

好了，來看下這個demo的效果吧

demo

這個我又把它稱為單區視差，ps:都自己拉稱呼了。

所謂單區，我理解的是在單個區域裡所完成的一系列動作，跟其它區域沒太大關係。

再來，加一些修飾性的東東，體現錯落的感覺，接著往下壘碼

123456

注：這些修飾的東西是跟區域父級同級的

css就不多說了，如下：

123456

.section

.section span

.section-1 .span-1

.section-1 .span-2

.section-1 .span-3

.section-1 .span-4

加了一小段函式

123456

function parallax());
$('.section-2').css();
$('.section-3').css();
}

這個不多說，看demo

demo

休息一下下，在上一集還留有乙個小尾巴哦————qq瀏覽器官網的視差實現，很帥的說，這個是怎麼辦到的呢，下面來模擬其中的乙個小模組，相信分解之後你就會明白了，首先來看下它的基本框架，跟上面說到的一樣，都要先劃區域

例：

123

4567

8910

web前端漫遊地

......

這裡只弄了乙個區域做為例子。

這個效果實現的重點其實在布局上，在布局中必須要清楚下一步的動畫應該要怎樣去呈現才能達到更好的銜接，從而將整個動畫貫穿起來。這裡還有個很好玩的東西：這個頁面是從上往下滾的，但是**中改變的卻不是top的值，而是left的值，這麼說來這個頁面其實是左右滾，而不是上下滾，但是為什麼會讓人產生這樣的感覺呢，我想這就是視差滾動的魅力所在，在這個頁面得到了很好的體現。接著往下看，你會找到你想要的答案。

讓你產生這種感覺的疑點：

1.這個頁面沒有預設滾動條，這樣一來方向感就可以不受拘束，從哪個方向來都行。

html

2.頁面元素很big，充滿整個螢幕，且相應元素都做了斜切扭曲變形skew。

ps：可以單獨搞個很big的元素，那麼變形一下，再滾個滾輪，運動軌跡就明了了。

.cont

優雅的轉身******************************====

這麼一來主要的部件就準備好了，現在就要看你布局的功力了，像這種如此big的元素肯定會涉及到不好定位的困擾，給大家介紹個我的方法：將頁面整體縮小來進行大體布局，可以一試，很不錯哦。

**張貼：

這裡就不全貼出來了，貼個js(希望大家交流下如果多元素運動時如何寫能更優化)，實驗demo在章末放出^_^

123

4567

891011

1213

1415

1617

var ispeed = 1500;
var ocont = $('.cont');
var otitle = $('.title');
function fnanimate(ispeed,odiv));} 
$('html').mousewheel(function (event, delta)else if(delta < 0)
});

我這裡的思路是獲取到元素的座標位置，然後再重新賦給它個新值。

為了能讓大家把原理弄得更清楚，給大家乙個**增減執行的步驟，可通過developer tools來進行原理梳理：

1.將頁面縮放到最小

2.去掉所有扭曲變形

用個圖來說明，形象些

好了，就到這，剩下的就看你怎麼折騰了

demo

解剖視差滾動（下集）

視差滾動效果

滾動視差 01

純CSS視差滾動

解剖視差滾動（下集）

視差滾動效果

滾動視差 01

純CSS視差滾動

相關推薦