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