視差滾動(Parallax Scrolling)效果的原理和實現

本文轉載自查看原文 2013-02-08 04:38 32677 JavaScript&jQuery/ resources/ HTML&CSS

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為今年網頁設計的熱點趨勢，越來越多的網站應用了這項技術。

一、什么是視差滾動？

視差效果，原本是一個天文學術語，當我們觀察星空時，離我們遠的星星移動速度較慢，離我們近的星星移動速度則較快。當我們坐在車上向車窗外看時，也會有這樣的感覺，遠處的群山似乎沒有在動，而近處的稻田卻在飛速掠過。許多游戲中都使用視差效果來增加場景的立體感。說的簡單點就是網頁內的元素在滾動屏幕時發生的位置的變化，然而各個不同的元素位置變化的速度不同，導致網頁內的元素有層次錯落的錯覺，這和我們人體的眼球效果很像。我看到多家產品商用視差滾動效果來展示產品，從不同的空間角度和用戶體驗，起到了非常不錯的效果。

目前這種視差滾動效果被越來越多的國外網站所應用，成為網頁設計的熱點趨勢。

通過一個很長的網頁頁面，其中利用一些令人驚嘆的插圖和圖形，並使用視差滾動（Parallax Scrolling）效果，讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。完美的展示了一個復雜的過程，讓你猶如置身其中。厭倦了千篇一律，呆板網頁設計的你不放一試。

就是固定背景不讓它隨着滾動軸移動，但包含背景的容器是跟着滾動的，所造成的視覺差異看起來就像跟轉換場景一樣。

二、視差滾動效果的主要特點：

1、直觀的設計，快速的響應速度，更合適運用於單頁面

2、差異滾動分層視差
頁面上很多的元素在相互獨立地滾動着，如果我們來對其它分層的話，可以有兩到三層：背景層，內容層，貼圖層。

三、原理

通過前景與背景在場景移動時產生不同的視差，從而達到簡單的立體效果

頁面上很多的元素在相互獨立地滾動着，如果我們來對其它分層的話，可以有兩到三層：背景層，內容層，貼圖層

　　差異滾動的實現規則：

　　背景層的滾動(最慢)
　　貼圖層(內容層和背景層之間的元素)的滾動(次慢)
　　內容層的滾動(可以和頁面的滾動速度一致)

　　我們讓三個圖層的滾動速度不一致，就做出了漂亮的差異滾動效果

1、運用大背景

　　這些背景圖像一般是高分辨率，大圖，覆蓋整個網站。高清照片是一個迅速抓住觀眾的好方式，可以產生極具沖擊力的視覺效果,用戶的視線會不自覺地落在寬大的背景上

　　注意：

　　1. 1、背景圖的色彩、內容在選擇時要十分講究，前提是不要破壞用戶的體驗，不然再漂亮的照片也是枉然。

　　圖片類型最好選取趨向於一些比較柔和、略帶透明的一類，不要影響到網站主體內容的閱讀，識別，講究協調。

　　1.2、以大量圖片為特色的頁面應該考慮圖像的預加載問題，以便為用戶提供更好更流暢的視覺體驗.

2、你也可以用簡單的配色方案

沒有比純色的背景更直觀更簡潔。純色可以有很多種表達方式，一個視差區間內顏色最好保持使用2到3種，我們可以調整顏色的透明度，來達到各種視覺效果

3、定位好背景層，貼圖層和內容層之間的關系

根據頁面自身的功能來定義是否需要貼圖層，貼圖層的存在是為了更有效的傳達視覺效果，但如果它成為了干擾，就會違背了我們使用的初衷

　　內容層的展現是最主要的，無論背景層和貼圖層有多少花哨，在設計師設計過程中，內容層對用戶的展示是最優先的

4、講故事

　　有力的表現、簡約的風格和設計的美感共同構成了一個出色地交互式敘事體驗。我們經常聽到這樣的話：內容是王道，技術只是實現內容的一種工具。當你能夠成功地把有力的信息和漂亮的執行力結合起來，你就能創造出人們喜歡並且享受其中的體驗。　————Wieden+Kennedy

　　TWO 數據可視化——信息圖形設計　故事1 傳統水銀體溫計和大字母水銀體溫計　　

四、實現方法和工具

1、在CSS中定義背景滾動方式的屬性是backgroud-attacthment

background-attachment -- 定義背景圖片隨滾動軸的移動方式

取值: scroll | fixed | inherit
- scroll: 默認值。背景圖像會隨着頁面其余部分的滾動而移動。
- fixed: 當頁面的其余部分滾動時，背景圖像不會移動。
- inherit: 規定應該從父元素繼承 background-attachment 屬性的設置。
- 初始值: scroll
- 繼承性: 否
- 適用於: 所有元素

附帶w3c的鏈接：http://www.w3school.com.cn/css/pr_background-attachment.asp

瀏覽器的支持性：

測試了chrome,opera,safari,firefox,ie7-8都是可以的，所以就是說IE6下不行~

在IE6下使用這個屬性，需要把background-attachment:fixed放置於body或html當中，就是說你說在其它標簽里面是沒用。上面的w3c里可以看得到效果就是因為它是放在body里的。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滾動視覺差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                width: 1280px;
                margin:auto
            }
            .header{
                background:#fff;
                padding: 10px 0
            }
            .bg-attachment{
                background:url(6.jpg) center center no-repeat;
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url(qingz.jpg) center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="header">
                <img src="5.jpg">
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img src="qi.jpg">
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>