QQ 瀏覽器官方網站的效果（Parallex Scrolling）是怎麼實現的？

01-14

QQ瀏覽器官方網站向下滾動

這種效果叫 Parallex Scrolling，是已經流行了一段時間的網站設計模式了。

實現方法可以參考 Smashing Magazine 的教程：Behind The Scenes Of Nike Better World

的確這種 Parallax Scrolling 已經存在很久了。至於 QQ 瀏覽器這個頁面，私以為，做的並不是很好。

視差滾動，適合一個接一個的畫面，一個流暢的故事從上至下，有頭有尾。無論是故事，還是介紹產品，必是由淺入深，連接流暢。文字必定要清晰明顯，不能被四面八方遊走的背景圖片打擾。背景始終是背景，視差滾動令背景和前景文字形成景深，令頁面產生立體感。

現在來看 QQ 瀏覽器網站：

先是頂端。既然做了視差滾動，信息有了更多呼吸的空間，可為什麼頂端要放那麼多信息，而且還是擠在一起。兩種字體，三四種顏色，我不明白那個「輕快上網瞬間開啟」為什麼看上去 offset 了一大截，我想不到會有什麼好的理由去解釋這個決定。

最關鍵的是，我不知道該看哪了。就在這時，突然，「跨屏穿越」那裡 slide 至一個視頻了。我還沒看清字兒呢。不過這個還不是最令人疑惑的。最令人疑惑的還是從電腦到手機之間的那 6 個點，和下面 slider 的 pagination 長的一模一樣。我分心了。

然後，我點了「向下滾動，看看有什麼」。這時視差滾動開始了。

接著，我就找不到「繼續滾動」的按鈕了。

使用視差滾動，有一個很重要的功能，就是一定要有讓用戶可以點擊的進度按鈕，或者用戶 scroll 一次的話無視 scroll 程度而是固定 .scrolltop 的值。否則我多 scroll 一點或者少 scroll 一點，就會 end up 在 transition 的中間。而 QQ 瀏覽器這個網站，我感覺要 scroll 比平時更多，才能看到下一個內容。

右邊的字，給人感覺和左邊的圖一樣，像背景，而不是正文。扭曲的字體，讓人覺得像裝飾。所以我沒有去讀。

最後，我到了這兒。

然後我又接著 scroll，才發現已經到底了。你覺得這個畫面有結束的感覺嗎？

總的來說，這個網站給我感覺，空洞無奇，just another parallax scrolling that went wrong。不要選擇最酷的，要選擇最適合自己的。當然我也不了解 QQ 瀏覽器的用戶群定位，也許我也沒有發言權。

這是「視差滾動」的效果，現在比較流行！
之前母親節時也試著寫了一個視差滾動的效果，很簡單，可以看下O(∩_∩)O~~
是使用的這個板子修改的：skrollr - parallax scrolling for the masses
這是我的網址：媽，節日快樂！
這裡邊也有我放的源碼地址，可以看下！

另外在覺唯的博客也有推薦比較棒的幾個視差滾動網站：14個超棒的帶有故事趣味性視差滾動網站

這是一個視差滾動的框架，那次本來打算用這個寫的，時間緊沒搞懂O(∩_∩)O~~

題主可以看看啊！ Welcome to Jarallax.com

剛剛才聽說這個東西就查了一下，很酷啊

這有個鏈接視差滾動(Parallax Scrolling)效果的原理和實現