水平垂直的原理是一樣的，它這個(gè)主要是增加了鼠標(biāo)滾輪事件，其他的沒(méi)啥特別。
雁塔網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái)到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
!doctype?html????
html????
head????
meta?charset="utf-8"?/????
title視差滾動(dòng)/title????
style????
*{margin:?0;padding:?0;}????
body{??}????
#bg{width:?100%;background-image:?url(trim.jpg);background-size:?cover;height:?768px;position:?fixed;}????
#img1{position:?fixed;top:?650px;border:?1px?solid?#aaa;padding:?4px;background-color:?#fff;}????
#img2{position:?fixed;top:?-500px;right:?0px;width:?600px;height:?300px;border:?1px?solid?#aaa;padding:?4px;background-color:?#fff;}????
#txt1{top:?400px;?position:?fixed;font-family:?'黑體';font-size:?36px;color:?#fff;font-weight:?bold;text-shadow:?2px?2px?12px?#fff;left:?-400px;}????
/style????
script?src="jquery-1.11.1.min.js"/script????
/head????
body????
div?id="bg"/div????
img?id="img1"?src="thumb.jpg"????
img?id="img2"?src="535032.jpg"????
div?id="txt1"納米尖兵巴德?tīng)?div????
div?style="height:3000px;"/div????
script????
window.onscroll=function(){????
var?ht=document.documentElement.scrollTop?||?document.body.scrollTop;????
$("#bg").css({"background-position":'0px?-'+ht/20+'px'});????
$("#img1").css({"top":650-ht/2+'px'});????
$("#img2").css({"top":-500+ht/2+'px'});????
$("#txt1").css({"left":-300+ht/2+'px','opacity':500/ht});????
}????
/script????
/body????
/html
對(duì)元素滾動(dòng)的次數(shù)進(jìn)行計(jì)數(shù)：
$("div").scroll(function() {
$("span").text(x+=1);
});
當(dāng)用戶(hù)滾動(dòng)指定的元素時(shí)，會(huì)發(fā)生 scroll 事件。
scroll 事件適用于所有可滾動(dòng)的元素和 window 對(duì)象（瀏覽器窗口）。
scroll() 函數(shù)觸發(fā) scroll 事件?；蛘呷绻O(shè)置了 function 函數(shù)，則規(guī)定當(dāng)發(fā)生 scroll
事件時(shí)執(zhí)行的代碼。
這是w3c的原版教程。jquery肯定有鼠標(biāo)滾動(dòng)事件一層來(lái)，你先試著用滾動(dòng)事件給每個(gè)大div做個(gè)簡(jiǎn)單動(dòng)畫(huà)，然后再想著做復(fù)雜的，其實(shí)這個(gè)效果就是利用滾動(dòng)事件讓大的DIV移動(dòng)，然后以DIV對(duì)應(yīng)瀏覽器的位置播放動(dòng)畫(huà)。
何為滾動(dòng)視差
視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗(yàn)。 作為網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)，越來(lái)越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)。
通常而言，滾動(dòng)視差在前端需要輔助 Javascript 才能實(shí)現(xiàn)。但是使用background-attachment也可以做到這樣的效果。
要了解background-attachment的作用可以參考我的另一篇關(guān)于它的簡(jiǎn)單介紹：
什么是background-attachment
使用background-attachment: fixed實(shí)現(xiàn)滾動(dòng)視差
首先，我們使用background-attachment: fixed來(lái)實(shí)現(xiàn)滾動(dòng)視差。fixed?此關(guān)鍵字表示背景相對(duì)于視口固定。即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。
這里的關(guān)鍵在于，即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。也就是說(shuō)， 背景圖從一開(kāi)始就已經(jīng)被固定死在初始所在的位置。
我們使用，圖文混合排布的方式，實(shí)現(xiàn)滾動(dòng)視差，HTML 結(jié)構(gòu)如下， .g-word表示內(nèi)容結(jié)構(gòu)，.g-img表示背景圖片結(jié)構(gòu) ：
關(guān)鍵 CSS：
效果如下：
嗯？有點(diǎn)神奇，為什么會(huì)是這樣呢？可能很多人會(huì)和我一樣，第一次接觸這個(gè)屬性對(duì)這樣的效果感到懵逼。
我們把上面background-attachment: fixed注釋掉，或者改為background-attachment: local，再看看效果：
這次，圖片正常跟隨滾動(dòng)條滾動(dòng)了，按常理，這種效果才符合我們大腦的思維。
而滾動(dòng)視差效果，正是不按常理出牌的一個(gè)效果，重點(diǎn)來(lái)了：
當(dāng)頁(yè)面滾動(dòng)到圖片應(yīng)該出現(xiàn)的位置，被設(shè)置了background-attachment: fixed的圖片并不會(huì)繼續(xù)跟隨頁(yè)面的滾動(dòng)而跟隨上下移動(dòng)，而是相對(duì)于視口固定死了。
好，我們?cè)賮?lái)試一下， 如果把所有.g-word內(nèi)容區(qū)塊都去掉 ，只剩下全部設(shè)置了background-attachment: fixed的背景圖區(qū)塊，會(huì)是怎么樣呢？
效果如下：
結(jié)合這張 GIF，相信能對(duì)background-attachment: fixed有個(gè)更深刻的認(rèn)識(shí)，移動(dòng)的只有視口，而背景圖是一直固定死的。
綜上，就是 CSS 使用background-attachment: fixed實(shí)現(xiàn)滾動(dòng)視差的一種方式，也是相對(duì)而言比較容易的一種。
參考文章： 滾動(dòng)視差？CSS 不在話(huà)下
this.stage.displayState=StageDisplayState.NORMAL; 最直接的就是把你那個(gè)全屏代碼刪除。。。
關(guān)于視差滾動(dòng)的剖析：
解剖視差滾動(dòng)（上集）
解剖視差滾動(dòng)（下集）【附加qq瀏覽器頁(yè)面輕解析】
更多頁(yè)面鑒賞
Apple - Mac Pro
QQ瀏覽器 for MAC 官方網(wǎng)站
Mac迅雷官網(wǎng)
重慶分公司
重慶分公司
