練習視差滾動例子 byKL

指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術。

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

屬性:

background-attachment -- 定義背景隨滾動軸的移動方式

取值: scroll | fixed | inherit
scroll: 預設值。背景影象會隨著頁面其餘部分的滾動而移動。
fixed: 當頁面的其餘部分滾動時，背景影象不會移動。
inherit: 規定應該從父元素繼承 background-attachment 屬性的設定。
初始值: scroll
繼承性: 否
適用於: 所有元素

效果:

例如,當向下滾動滑鼠的時候,

背景影象固定了位置(section1和2的背景圖會固定在當前瀏覽器顯示介面,並且section1會擋住section2,因為都在同乙個位置,然後1比2的位置靠前),

然後頁面其他部分就會向上移動(所謂前景,就是section1和2的div dom元素),

向上移動的時候,section2的dom會跟著進入當前頁面,所以會慢慢開啟section2的畫面,

所以看起來背景圖被固定住,這樣就會造成了乙個視覺落差.

**:

啊啊啊啊

噢噢噢噢

效果:

通過移動滑鼠,不斷改變div的位置值來實現移動,並且通過2個不一樣的值的變化來實現落差,從而實現視差效果

body

#div1
#div2

//獲取兩個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)

參考引用:

視差滾動(parallax scrolling)效果的原理和實現

視差滾動效果

確實，早期大部分視差滾動效果基本上就是如此，滾動事件是前提，然後要麼是直接改變位置，要麼如果是使用了背景，則改變背景的background position，不過實際上這種方法是存在缺陷的。監聽滾動事件，要想做到盡可能地流暢渲染效果，就不可以讓滾動事件 節流防抖動 throttle debounce...

滾動視差 01

先看一下示例展示第四屏的效果 思路 視差滾動到相應的容器時，讓背景固定不動，等滑到某個高度時恢復正常滾動，這裡是用兩張相同的做交替覆蓋，由於相同，因此看不出變化，從而達到一定的滾動視差效果，當然滾動視差效果有很多態別，這只是其中的一種方式，而且還沒有達到像示例展示那裡的效果，還需要對背景進行一定的優...

純CSS視差滾動

參考旭哥的 demo點這裡 class box class curtain class comehere div div box curtain comehere 1.原理就是 利用perspective translatez，使得影象在視覺上縮放，然後通過scale將縮放至原來的大小，但是對於滾動...