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

時間 2019-11-18

標籤視差滾動 parallax scrolling 效果原理實現简体版

原文原文鏈接

原文：http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.htmljavascript

視差滾動（Parallax Scrolling）是指讓多層背景以不一樣的速度移動，造成立體的運動效果，帶來很是出色的視覺體驗。做爲今年網頁設計的熱點趨勢，愈來愈多的網站應用了這項技術。php

能夠先看看效果：http://www.ok-studios.de/home/css

1、什麼是視差滾動？

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

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

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

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

2、視差滾動效果的主要特色：java

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

二、差別滾動分層視差
頁面上不少的元素在相互獨立地滾動着，若是咱們來對其它分層的話，能夠有兩到三層：背景層，內容層，貼圖層。

3、原理

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

頁面上不少的元素在相互獨立地滾動着，若是咱們來對其它分層的話，能夠有兩到三層：背景層，內容層，貼圖層jquery

　　差別滾動的實現規則：ios

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

　　咱們讓三個圖層的滾動速度不一致，就作出了漂亮的差別滾動效果git

一、運用大背景github

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

　　注意：

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

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

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

二、你也能夠用簡單的配色方案

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

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

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

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

四、講故事

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

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

4、實現方法和工具

一、在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>

二、插件

Scrollorama