像這種網站效果，整屏整屏換有沒有什麼名字？

BeoPlay

還有什麼類似的網站嗎?

---

正好昨天看到一個這個插件：fullPage.js One Page Scroll Site Plugin

話說最近這樣的頁面展示效果使用的很多啊，比如說這幾天很火的鎚子手機： 首頁 - 鎚子科技

還有知乎廣告出去的某瀏覽器的首頁：千尋瀏覽器

Apple 官網的 iPhone 5c 展示也採用的就是這樣的方式，特別生動優雅 FullScreen BackgroundsGithub：alvarotrigo/fullPage.js 路 GitHub

---

引自騰訊全端 AlloyTeam 團隊視差滾動的愛情故事

【定義】

所謂的視差滾動，就是在頁面滾動過程中，多層次的元素進行不同程度的位移，帶來立體的視差效果。還有很多的奇思妙想的展現方式，都是滾動頁面觸發的，也可稱為視差滾動。視差滾動裡面最基礎的就是切換背景，這點其實一個CSS就滿足了

【視差滾動原理一】

background-attachment: fixed || scroll || local

默認是scroll，內容跟著背景走，而視差滾動頁面里用fixed，背景相對頁面固定而不跟內容滾動。

很快地我就做出了一個demo出來，還特意配上幾張優雅的圖片和極富內涵的詞句，女神一定會因為我的文采而愛上我的，而且，那些看似簡單的「我是內容」不斷重複，其實只要細心就會發現裡面隱藏著我的表白，情商如此之高的女神，一定會發現，然後我們就可以幸福的在一起，在愛情的滋潤下，我很快就能升職加薪，當上總經理，出任CEO，贏取白富美，走上人生巔峰。哈哈哈哈哈哈哈哈，誒？好像不用贏取白富美，那就挑戰白富美。

demo1_base

「咦，怎麼是靜態的，譚偉X，能不能幫我做個會動的那種的視差滾動，麻煩了么么噠~」

。。。。。。居然完全沒有留意到我溢出的文采和隱藏的表白。。。。。沒事！雖然跟我預想有點出入，但女神這是在考驗我！

【視差滾動原理二】

女神想要些更加豐富的效果，也對，像我這麼內涵有檔次的程序員，當然要來寫非常酷的動畫效果。

在原理的demo1的基礎上，我在scroll事件上添加一些動畫事件。

window.addEventListener("scroll",function(e){
var scrollTop = window.scrollY;
if(scrollTop &> 0 scrollTop &< articleHeight){ title1.classList.add("title-anim"); content1.classList.add("content-anim"); }else if(scrollTop &>= articleHeight scrollTop &< articleHeight*2){ title2.classList.add("title-anim"); content2.classList.add("content-anim"); }else if(scrollTop &>= articleHeight*2 scrollTop &< articleHeight*3){ title3.classList.add("title-anim2"); content3.classList.add("content-anim"); } })

視差滾動的表現方式非常多，滾動到頁面某個值後會觸發一個CSS3動畫，這也是眾多視差滾動中常見的一種。

demo2_anim

(這個Demo使用了CSS3動畫，請使用現代瀏覽器查看)

【視差滾動原理三】

視差滾動中最突出的內容就是立體的視差效果，最具有說明代表性的就是超級瑪麗的遊戲場景

當玩家操作馬里奧移動時，水管和牆塊更馬里奧在同一水平層，移動速度最快。天上的白云為中層背景圖，移動速度中等。而小山丘是最遠的背景圖，移動速度最慢。三個層次內容按不同速度移動，就會帶來一種立體的視差效果。

在dom結構上，把同一層的dom元素都放到一個div裡面，html結構如下。

JavaScript

&
&
&
&
& &
&
&
&
& &
&
&
&
&

在頁面滾動過程中，我們獲取頁面的scrollTop的值，根據不同參數值去設置各自scene的top值，這樣滾動頁面的時候，不同的速度就出來了

var sceneBack = document.getElementById("scene_back"),
sceneCenter = document.getElementById("scene_center"),
sceneFront = document.getElementById("scene_front");
var old_top1 = 0,
old_top2 = 200,
old_top3 = 700;

addEvent(window,"scroll",onScroll);
onScroll();

function onScroll(e){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
sceneBack.style.top = old_top1+scrollTop*.9+"px";
sceneCenter.style.top = old_top2+scrollTop*.7+"px";
sceneFront.style.top = old_top3+scrollTop*.3+"px";
}

function addEvent(eventTarget, eventType, eventHandler) {
if (eventTarget.addEventListener) {
eventTarget.addEventListener(eventType, eventHandler, false);
} else {
if (eventTarget.attachEvent) {
eventType = "on" + eventType;
eventTarget.attachEvent(eventType, eventHandler);
} else {
eventTarget["on" + eventType] = eventHandler;
}
}
}


由於女神在等待的關係，代碼有點搓，也沒有做兼容性，但是原理就是這樣的。

demo3_scene

這個Demo在非IE6/7下都能查看，只是,IE8的效果並不太好。Firefox效果最好。

這裡還有個特殊情況：在Chrome下查看這個Demo請拖動滾動條，而不是滾動滑鼠。原因是Chrome瀏覽器對滑鼠的滾動做了優化處理，滾動一個齒輪幅度，其他瀏覽器是觸發十幾次scroll事件，而Chrome只會觸發一次。只有一幀的動畫，大家想想就知道。這裡可以考慮加入緩動動畫，本Demo是基於原理說明和泡女神，具體可以留意下一篇博客優化篇

兩個demo完事後，很快地就交到女神手上，這次我在demo特意多加上幾句（真的是幾句？）表白，女神這次一定能發現的。而且，pokemon都出來幫忙了，精心挑選的初代御三家來賣萌，女神一定被萌到在我廣闊的胸懷，然後愛上我，我在愛情的滋潤下，我很快就會升職加薪，當上總經理，出入CEO，挑戰白富美，走上人生巔峰。哈哈哈哈哈哈啊哈。

「啊，歐巴好厲害喲~最後一次拜託你，能不能做個滾動的時候角色上下出現的效果。弄完我請你吃飯喲。」

。。。。。。居然還是沒有留意我的表白。。。但是，女神要請我吃飯了，想想都有點激動。不過請吃飯這事，應該反過來才對，我無數次幻想這樣的場景：我在萬眾矚目下，大喊「女神我暗戀你好久了，我好喜歡你！我一定會追到你，然後我要帶你去吃KFC。」

【視差滾動一種效果實現】

上下顛倒出現，這個跟原理三是一樣的，唯獨就是不是所有的元素都是往上升，而是一些元素上升，一些元素下沉。在計算top值的時候，不是「加上」，變成「減去」scrollTop就會有相應的效果。親自試了一下，效果就出來了，但是很明顯有個問題，就是上升元素和下沉元素在同一水平線上的時候，這時卻不是在頁面正中間。這時候思考一下問題所在就好了。計算top的公式是下面

JavaScript

1

2

newTop1 = oldTop1 + scrollTop * x1 ; (x是個係數)

newTop2 = oldTop2 - scrollTop * x2 ; (x是個係數)

我們假設，oldTop為-1000，oldTop2為1000，我們希望滾動到500的時候，兩者在同一水平線上，這時newTop1和newTop2都相同為500才能再頁面中心（注意不是0，自個想想就明白）。這樣得到x1為2，x2為0。代碼如下。

var sona = document.getElementById("sona"),
ahri = document.getElementById("ahri");
var old_top1 = -1000,
old_top2 = 1000;

addEvent(window,"scroll",onScroll);
onScroll();

function onScroll(e){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
sona.style.top = old_top1+scrollTop*2+"px";
ahri.style.top = old_top2-scrollTop*0+"px";
}

function addEvent(eventTarget, eventType, eventHandler) {
if (eventTarget.addEventListener) {
eventTarget.addEventListener(eventType, eventHandler, false);
} else {
if (eventTarget.attachEvent) {
eventType = "on" + eventType;
eventTarget.attachEvent(eventType, eventHandler);
} else {
eventTarget["on" + eventType] = eventHandler;
}
}
}


所以，如果在多種效果混合使用，希望滾動到某地方的時候，某兩個dom元素在同一水平線上且在頁面中間，代入參數，得到不同x1，x2即可。

demo4_reverse

---

這種叫 視差滾動（Parallax Scrolling）。即多個元素以不同的層次堆疊在一起，並隨滑鼠滾輪滾動而進行位置移動，進而形成立體的運動效果。

比如這個遊戲畫面里通過人物馬里奧、前景、背景著三個部分的移動速率的不同來實現立體效果。類比網頁也是如此。一個滾動視察的網站至少會有以下幾層 ：背景層，內容層，貼圖層。

類似網站：

http://nikebetterworld.com/

http://ianlunn.co.uk/plugins/jquery-parallax/

類似Nike for a Better World 產品展示頁面的視差滾動效果。

源碼下載 http://pan.baidu.com/s/1hqssgcc

http://www.sequencejs.com/themes/sliding-horizontal-parallax/

水平方向的視差滾動。

源碼下載 http://pan.baidu.com/s/1kT5dnbL

Bit This

Bit This 是一家位於西班牙馬德里的代理公司。

New Zealand

The New Zealand 是一家介紹紐西蘭旅遊的網站。

Diablo Media

Diablo Media 是一家線上營銷代理公司：為廣告主和出版商發布產品和作品。

360 Long Road ZurichNetlash bSeen

Netlash BSeen 是由 Netlash 創建人和線上營銷代理 bSeen 合併之後新創建的一家代理公司。

Ito Sio CeniSullivanIutopiCultural SolutionsGo Up

Go Up 是一家義大利廣告代理公司。

Ito Sio Ceni

Ito Sio Ceni 是一家波蘭的廣播公司，

Sullivan

Sullivan 是一家提供從各個方面提升用戶接觸度服務的代理公司。

Iutopi

Iutopi 是一家品牌、平面設計和網頁設計代理公司。

Cultural Solutions

Cultural Solutions 是英國的一家企業管理代理公司。

Go Up

Go Up 是一家義大利廣告代理公司。

【參考資料】

[1]http://www.damndigital.com/archives/37242

[2]http://www.cnblogs.com/lhb25/archive/2011/06/01/parallax-scrolling-in-web-design.html

——————————————————————————————————————

=-=||| 各位說我文不對題的頁面，其實是問題提到的網頁改版了……之前的確實是視差滾動的。你看我樓下那個早期回答也是這樣的類型

---

個人建站中，準備採用這種形式展示。查閱其文檔。

驚人發現如下，大家也可以借鑒一下這些網站的設計風格。

British Airways Behind The Design"

- Sony MDR Headphones

- | Vodafone xone

- CERVEZA SALTA

- Snapzheimer

- New JUMO Concept

- 小米手環智能手環——小米手機官網

- Moneytree 一生通帳、家計簿より楽チン！

- Leafcutter Creative Digital

- Restaurant WOODS

- Charlotte Aimes

- Made of Sundays

- JACOB ERIKSSON

- http://patuque.com/santateresa

- YMCA Annual Report 2013

- Dividend Solar: America』s Energy Investment Platform

- The Specialists

- Brian Ingle - test

- lawinenstift Werbeagentur Berlin Charlottenburg

- http://wtfdesign.pl/

- TheKorner

- Education Above All

- Blacknova Academy

- Rocker Creative

- Nova

- Scribe: Copy and paste anything from your Mac to your iPhone, without Wi-Fi

- SWENK.me | Violin cases with your personality

- Lucile Cazanave

- http://overallstudio.co.il/

- SUM HING CARTON BOX FACTORY 森興紙品廠

- MedLIVE - Real-Time Market Data

- http://bearonunicycle.com/

- http://rawmilk.dk/en/

- Nearpod: Create, Engage, Assess through Mobile Devices.

- Fama Volat

- Carpet Lover Club

- Zack Batsaikhan. Creative Director.

- GraphicID - grafisk design

- Homme en Devenir

- JukStaPoz

- Portfolio Arno

- 2013老夫子50 時空叮叮車

- Matrimonia | Ekskluzivan Salon Ven??anica

- carlphot

- Medissix

- Viaggia con Terna nel Mondo della Trasmissione dell"energia Elettrica

- CONSUMED, the Movie

- http://www.villareginateodolinda.it

- Rodrigo Maroto Portfolio 2013

- http://azul257.com.mx

- MGfilms

- THE KESS TRIO

- Will Fong

- Karma FFE

- Foss distillery

- Conversion Culture

- Дед Мороз и Снегурочка Киев. Корпоративы и детские утренники

- FERGAL KEENAN

- http://spell-star.appspot.com/

- http://yizeng.me/

- Neo Learning NL

- http://sunfishlabs.com/

- Unabridged Software

- Plainworks Worldcup 2014 Match Schedule

- Home | Organice

- Alchemy Research Analytics-A knowledge outsourcing firm

- CIMA 2015 - Vuelve al origen

- El m??todo Japon??s para dejar de fumar f??cilmente

- http://atlanticcorp.us/

- http://moysport.ru/

- N?rttilaakso Oy!

- World Cup 2014 Fixtures

- http://www.dopehustleinc.com/default.php

- http://themify.me/demo/#theme=fullpane

- http://bragdonfarm.com/

- Paperdeer

- Veterans of Foreign Wars VFW Post 1

- Dancing Road Productions

- Camani | Indonesian Iconic Scents

- Exapoint: easySoft, Qualit辰tsmanagement Gesundheitswesen, SOP Management

---

基於碼農的價值觀，完全未能捕捉到題主單純只是為了尋求一個名詞解釋的動機。

以下回答基本跑題。

----------------------------

事實上只要注意到這個url中的#號，就應該明白這是一種基於hash change 事件做路由導向的頁面設計風格。

一般的web頁面，都是基於url做路由的，即url改變了，那麼就到了另外一個頁面。如，baidu首頁就是 baidu.com,貼吧首頁就是http://tieba.baidu.com。

基於hash（hash即url中#後面的部分）的頁面卻不是這樣。像當前網站，首頁是 http://beoplay.cn/#/home，某產品信息就是 http://beoplay.cn/#/products/h6，url的uri部分是沒變的，變得是hash，即頁面並不會刷新，但是瀏覽器的history介面可以提供pushState功能，即按退格鍵會到上一次hashchange時的url，以實現類似頁面跳轉的效果。

開發人員要做的就是每次hashchange事件發生時，獲取hash值並做路由處理，例如uri#/product/$id就展示某個產品, uri#/home就展示首頁之類的，都是在先ajax數據，然後本地操作dom實現的，所以速度很快，且不會影響某些流媒體播放。

國內有很多這樣的網站，例如QQ音樂-音樂你的生活！ 、 網易雲音樂 聽見好時光

當然，hashchange事件在ie67應該是不支持的，我也沒測試，不知道在ie67是否還是這樣實現的。

至於單頁滾動、視差滾動這些詞所形容的頁面效果，常見於wordpress的一些主題，國外很多個人站非常喜歡這種風格，google one page blog即可看到很多結果。只是單純基於scroll事件，綁定一些dom操作，跟hashchange結合ajax的效果不可同日而語。事實上，這種效果只有結合hashchange ajax才能真正發揮作用，否則就是花瓶。

---

Apple - Mac Pro

QQ瀏覽器 for MAC 官方網站

Mac迅雷官網

---

像這種整屏整屏換的效果它是有名字的，並且它的名字見名就能知道其意思。它就是鼎鼎大名的：輪播圖。是不是就是這種感覺 一屏一屏的顯示 再循環的播放出來。如果想寫出這樣的效果 其實有兩種方法。一種是自己分析頁面結構 實現其效果。另一種是知道名字以後去互聯網上面找到類型的效果，然後用大招將其copy出來。積極思考問題我們總能解決的！

先來說一說第一種自力更生的方法：

用F12審查元素以後，我們發現 其實這五張圖都是顯示在同一個區域來顯示，超過一張圖以外的區域其實不可以看見的 對於大的容器設置了over-flow:hidden超過的部分就不能顯示出來

那我們下面我們自己使用的代碼來實現類型的效果

代碼的展示分為三個部分 希望對大家能有幫助

第一部分：樣式（css）

#wrap {

height: 280px;

width: 520px;

position: relative;

margin: 50px auto;

}

#wrap #content {

list-style: none;

position: relative;

height: 280px;

width: 520px;

overflow: hidden;

}

#wrap #content li {

position: absolute;

left: 520px;

top: 0;

}

#wrap #content li.select {

left: 0;

}

#wrap #nav {

list-style: none;

width: 200px;

height: 20px;

background: #333333;

border-radius: 5px;

position: absolute;

left: 160px;

bottom: 20px;

}

#wrap #nav li {

float: left;

height: 10px;

width: 10px;

border-radius: 50%;

background: #FFFFFF;

margin-top: 5px;

margin-left: 25px;

}

#wrap #nav li.select {

background: #ffff00;

}

第二部分：布局（html+div）

&<div id="wrap"&>

&<ul id="content"&>

&<li class="select"&>&<img src="img/01.jpg"/&>&li&>

&<li&>&<img src="img/02.jpg"/&>&li&>

&<li&>&<img src="img/03.jpg"/&>&li&>

&<li&>&<img src="img/04.jpg"/&>&li&>

&<li&>&<img src="img/05.jpg"/&>&li&>

&ul&>

&<ul id="nav"&>

&<li class="select"&>&li&>

&<li&>&li&>

&<li&>&li&>

&<li&>&li&>

&<li&>&li&>

&ul&>

&div&>

第三部：功能（js/jq）

&<script src="js/jquery-1.11.3.js"&>&script&>

&<script&>

var index = 0;

var timer = null;

var length = $("#nav li").length;

var $before = index;

$("#nav li").hover(function () {

index = $(this).index();

clearInterval(timer);//清除定時器

$("#nav

li").eq(index).addClass("select").siblings().removeClass("select");

if (index &> $before) {//從左到右

$("#content li").eq($before).animate({left: -520});

$("#content li").eq(index).css("left",

520).animate({left: 0});

} else if (index &< $before) {//從右到左

$("#content li").eq($before).animate({left: 520});

$("#content li").eq(index).css("left",

-520).animate({left: 0});

} $before = index;

}, function () {

start();

});

start();

function start() {

clearInterval(timer);

timer = setInterval(function () {

index++;

if (index == length) {

index = 0;

}

$("#nav

li").eq(index).addClass("select").siblings().removeClass("select");

$("#content li").eq($before).animate({left: -520});

$("#content li").eq(index).css("left",

520).animate({left: 0});

$before = index;

}, 1000)

}

&script&>

只要引入jq 然後替換圖片 我們要的效果就可以飛起來了

第二種：大招功能 輪播圖插件(介紹三種)

個人排名：No1：萬能的swiper （http://www.swiper.com.cn/） 功能強悍到哭 橫行PC端移動端 簡單的話只要有輪播圖的地方 都可以使用swiper

No2：jquery輪播圖插件unslider和slideBox (http://www.jq22.com/jquery-info1940 http://www.jq22.com/jquery-info385) 支持響應式 最低支持到IE6，可以使用css進行完全的自定義

No3: BootStrap的carousel插件（http://v3.bootcss.com/javascript/#carousel） 是一種靈活的響應式的向站點添加滑塊的方式。內容靈活，圖像，內嵌框架 視頻或者其他想要放的任何類型內容

---

不錯，學習啦。

---

推薦閱讀：