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

开乐彩地址 www.tgbko.com 視差滾動(Parallax Scrolling)是指讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。作為今年網頁設計的熱點趨勢,越來越多的網站應用了這項技術。

可以先看看效果://www.ok-studios.de/home/

一、什么是視差滾動?
視差效果,原本是一個天文學術語,當我們觀察星空時,離我們遠的星星移動速度較慢,離我們近的星星移動速度則較快。當我們坐在車上向車窗外 看時,也會有這樣的感覺,遠處的群山似乎沒有在動,而近處的稻田卻在飛速掠過。許多游戲中都使用視差效果來增加場景的立體感。說的簡單點就是網頁內的元素在滾動屏幕時發生的位置的變化,然而各個不同的元素位置變化的速度不同,導致網頁內的元素有層次錯落的錯覺,這和我們人體的眼球效果很像。我看到多家產品商用視差滾動效果來展示產品,從不同的空間角度和用戶體驗,起到了非常不錯的效果。
目前這種視差滾動效果被越來越多的國外網站所應用, 成為網頁設計的熱點趨勢。
通過一個很長的網頁頁面,其中利用一些令人驚嘆的插圖和圖形,并使用視差滾動(Parallax Scrolling)效果,讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。完美的展示了一個復雜的過程,讓你猶如置身其中。厭倦了千篇一律,呆板網頁設計的你不放一試。

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

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

1、直觀的設計,快速的響應速度,更合適運用于單頁面
2、差異滾動 分層視差
頁面上很多的元素在相互獨立地滾動著,如果我們來對其它分層的話,可以有兩到三層 :背景層,內容層,貼圖層。

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

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

差異滾動的實現規則:

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

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

1、運用大背景

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

注意:

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

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

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

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

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

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

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

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

4、講故事

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

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

四、實現方法和工具

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

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

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

附帶w3c的鏈接://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>
復制代碼

2、插件

Scrollorama

滾動視差網站工具與教程

curtain.js??類似于幕布升起的效果

滾動視差網站工具與教程

jQuery-Parallax

滾動視差網站工具與教程

stellar.js

滾動視差網站工具與教程

jparallax

滾動視差網站工具與教程

Skrollr

滾動視差網站工具與教程

Parallax.js

滾動視差網站工具與教程

A Simple Parallax Scrolling Technique via Nettuts+

滾動視差網站工具與教程

Parallax Slider

3、教程

四、超炫的視差滾動效果網站設計欣賞

GLP創意

無限滾動-18

divups

New ebay

New ebay

360 Long Road Zurich

Q Music Titanic

Q music Titanic

Putzengel

Putzengel

OK Studios

OK Studios

Nike Better World

Nike Better World

Ben the Bodyguard

Ben the Body Guard

Egopop Creative Studio

Egopop Creative Studio

Smokey Bones

Smokey Bones

Cultural Solutions

Cultural Solutions

The Beatles Rock Band

The Beatles Rock Band

XHTML Slicing

XHTML Slicing

Farmhouse Fare

Farmhouse Fare

Sullivan NYC

Sullivan NYC

I to Sie Ceni

I to Sie Ceni

Grab and Go

Grab and Go

Micro-Site for Mario Kart Wii

Micro-site for Mario Kart Wii

Air Jordan 2012

Air Jordan 2012

Micro-site for Mario Kart Wii

Micro-site for Mario Kart Wii

Unfold

Unfold

Dentsu Network

Dentsu Network

ResIm

ResIm

Jan Ploch

Jan Ploch

Kry-Ptis

Kry-Ptis

Anna Safroncik

Anna Safroncik

Unfinished Business

Unfinished Business

Volkswagen-Beetle

Volkswagen-Beetle

Appmiral

Appmiral

Atlantis World’s Fair

Atlantis World's Fair

Johan Reinhold

Johan Reinhold

Iutopi

Iutopi

Beautiful Explorer

Beautiful Explorer

Bagigia

Bagigia

Activate Drinks

Activate Drinks

Tokyu Agency Recruit 2013

Tokyu Agency Recruit 2013

Von Dutch

Von Dutch

Playtend

Playtend

Phase 2 Design Studio

Phase 2 Design Studio

Friendly Gents

Friendly Gents

TokioLab

TokioLab

Krystalrae

Krystalrae

No leath

No leath

Dangers of Fracking

Mo’s & Bows

Tinke

Whiteboard

Parallax Scrolling in Web Design

New Zealand

Parallax Scrolling in Web Design

Marcus Thomas

Parallax Scrolling in Web Design

Fishy

Parallax Scrolling in Web Design

Soleil Noir

Parallax Scrolling in Web Design

kinvara3

Parallax Scrolling in Web Design

Smokey Bones

Parallax Scrolling in Web Design

Laurentius : Jaarverslag 2010

Parallax Scrolling in Web Design

ala

Parallax Scrolling in Web Design

Bomb Girls

Parallax Scrolling in Web Design

Head2Heart

Parallax Scrolling in Web Design

Michelberger Booze<

Parallax Scrolling in Web Design

Ascensión Latorre

Parallax Scrolling in Web Design

Biamar

Parallax Scrolling in Web Design

inTacto 10 Years

Parallax Scrolling in Web Design

//www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html

發表評論

電子郵件地址不會被公開。