資訊專欄INFORMATION COLUMN
摘要：練習(xí)視差滾動例子介紹一下視差指網(wǎng)頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網(wǎng)頁展示技術(shù)。背景圖像會隨著頁面其余部分的滾動而移動。
練習(xí)視差滾動例子 介紹一下視差
指網(wǎng)頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網(wǎng)頁展示技術(shù)。
通過前景與背景在場景移動時產(chǎn)生不同的視差，從而達到簡單的立體效果
說的簡單點就是網(wǎng)頁內(nèi)的元素在滾動屏幕時發(fā)生的位置的變化，然而各個不同的元素位置變化的速度不同，導(dǎo)致網(wǎng)頁內(nèi)的元素有層次錯落的錯覺,例如js的鼠標坐標移動實現(xiàn)
或者相對來說,一個動,另外一個不動,也能造成視覺落差的感覺,例如css的backgroud-attacthment實現(xiàn)
css的backgroud-attacthment實現(xiàn)屬性:
background-attachment -- 定義背景圖片隨滾動軸的移動方式 取值: scroll | fixed | inherit scroll: 默認值。背景圖像會隨著頁面其余部分的滾動而移動。 fixed: 當(dāng)頁面的其余部分滾動時，背景圖像不會移動。 inherit: 規(guī)定應(yīng)該從父元素繼承 background-attachment 屬性的設(shè)置。 初始值: scroll 繼承性: 否 適用于: 所有元素
效果:
例如,當(dāng)向下滾動鼠標的時候,
背景圖像固定了位置(section1和2的背景圖會固定在當(dāng)前瀏覽器顯示界面,并且section1會擋住section2,因為都在同一個位置,然后1比2的位置靠前),
然后頁面其他部分就會向上移動(所謂前景,就是section1和2的div dom元素),
向上移動的時候,section2的dom會跟著進入當(dāng)前頁面,所以會慢慢打開section2的畫面,
所以看起來背景圖被固定住,這樣就會造成了一個視覺落差.
代碼:
視差滾動
啊啊啊啊
噢噢噢噢
javascript實現(xiàn)(鼠標移動)
效果:
html部分通過移動鼠標,不斷改變div的位置值來實現(xiàn)移動,并且通過2個不一樣的值的變化來實現(xiàn)落差,從而實現(xiàn)視差效果
Title
css部分
body{
/*為了顯示需要*/
width: 100%;
/*因為瀏覽器的高度獲取會出現(xiàn)兼容問題,所以為了方便測試,固定一個值*/
height: 800px;
border: solid 1px blue;
}
#div1{
/*為了顯示需要*/
width: 100px;
height: 100px;
border: solid 1px black;
position: absolute;
}
#div2{
/*為了顯示需要*/
width: 200px;
height: 200px;
border: solid 1px red;
position: absolute;
}
js部分
//獲取兩個div
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//獲取瀏覽器的body的寬和高,并且一般來說,body的大小就是瀏覽器顯示界面的大小
var _w = document.body.clientWidth;
var _h = document.body.clientHeight;
//初始化兩個div的起始位置為瀏覽器界面的一半的位置
div1.style.left = _w/2 + "px";
div1.style.top = _h/2 + "px";
div2.style.left = _w/2 + "px";
div2.style.top = _h/2 + "px";
var ex,ey, ex2,ey2;
//綁定鼠標移動事件onmousemove,只要鼠標移動就會不斷接受事件
document.onmousemove = function(e){
//div1移動的距離值
//除以5或者10是為了避免數(shù)值太大移出屏幕顯示,并且2個不同的數(shù)字能夠看出區(qū)別
ex = e.clientX / 10; //鼠標當(dāng)前的x坐標除以10
ey = e.clientY / 10; //鼠標當(dāng)前的y坐標除以10
//div2移動的距離值
ex2 = e.clientX / 5; //同上,除以5是為了看出區(qū)別
ey2 = e.clientY / 5;
//div1的left值等于body的一半加上div1的移動值,同類推top值
//這樣就是從body的一半(屏幕中間)開始移動
div1.style.left = _w/2 + ex +"px";
div1.style.top = _h/2 + ey + "px";
div2.style.left = _w/2 + ex2 + "px";
div2.style.top = _h/2 + ey2 + "px";
}
參考引用:
視差滾動(Parallax Scrolling)效果的原理和實現(xiàn)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88181.html
摘要：練習(xí)倒計時例子倒計時就是時間一秒秒的倒數(shù)一般都是目標時間跟現(xiàn)在時間進行比較部分結(jié)果部分對象的使用對象基于年月日世界標準時間起的毫秒數(shù)返回的是毫秒數(shù)傳入的參數(shù)表示日期的字符串值。 練習(xí)倒計時例子 倒計時就是時間一秒秒的倒數(shù),一般都是目標時間跟現(xiàn)在時間進行比較 html部分 set 結(jié)果: js部分 Date對象的使用 Date 對象基于1970年1月1日（世...
摘要：近些年討論得很熱烈的設(shè)計趨勢是視覺差滾動效果。在本教程中，我會介紹視覺差滾動和用插件來制作視覺差滾動效果。如果你想使用，可以通過以下命令下載好后，在頁面中引用完成后，開始給頁面添加視覺差滾動效果。在一個頁面運用創(chuàng)建一個視差滾動效果的示例。 近些年討論得很熱烈的設(shè)計趨勢是視覺差滾動效果。不管你喜不喜歡，很多網(wǎng)站都在用它。在本教程中，我會介紹視覺差滾動和用jQuery插件Stellar.j...
摘要：考慮到環(huán)境導(dǎo)致的行為差異太大，應(yīng)該避免在塊級作用域內(nèi)聲明函數(shù)。函數(shù)聲明語句函數(shù)表達式循環(huán)循環(huán)還有一個特別之處，就是循環(huán)語句部分是一個父作用域，而循環(huán)體內(nèi)部是一個單獨的子作用域。聲明一個只讀的常量。 es6學(xué)習(xí)筆記-let,const和塊級作用域_v1.0 塊級作用域 javascript 原來是沒有塊級作用域的,只有全局作用域和函數(shù)作用域 例子1 因為沒有塊級作用域,所以每次的i都是一...
閱讀 3633·2021-11-16 11:45
閱讀 2347·2021-11-08 13:23
閱讀 2279·2021-10-11 10:59
閱讀 2958·2021-09-27 13:36
閱讀 2542·2019-08-30 15:54
閱讀 2727·2019-08-29 16:58
閱讀 2917·2019-08-29 16:56
閱讀 1437·2019-08-26 13:52
