无论页面是否滚动，这都会在视图中以及在background属性内设置的精确坐标处锚定两个气泡。

Parallaxing气泡

平台设置为两个气泡层的视差。当我们滚动页面时，我们将以与滚动相反的方向移动每个图层，并以不同的速度移动：

JavaScript的：

<font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

><SCRIPT></font></font><font></font>

<font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

//创建跨浏览器requestAnimationFrame方法：</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

window.requestAnimationFrame = window.requestAnimationFrame</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

|| </font><font style=

"vertical-align: inherit;"

>window.mozRequestAnimationFrame</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

|| </font><font style=

"vertical-align: inherit;"

>window.webkitRequestAnimationFrame</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

|| </font><font style=

"vertical-align: inherit;"

>window.msRequestAnimationFrame</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

|| </font><font style=

"vertical-align: inherit;"

>

function

（f）{setTimeout（f，1000/60）}</font></font><font></font>

<font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

var

bubble1 = document.getElementById（

'bubbles1'

）</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

var

bubble2 = document.getElementById（

'bubbles2'

）</font></font><font></font>

<font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

function

parallaxbubbles（）{</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

var

scrolltop = window.pageYOffset 

//获取文档垂直滚动的像素数 </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

bubble1.style.top = -scrolltop * .2 +

'px'

//以20％的滚动速率移动bubble1</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

bubble2.style.top = -scrolltop * .5 +

'px'

//以50％的滚动速率移动bubble2</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font><font></font>

<font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

window.addEventListener（

'scroll'

，

function

（）{

//页面滚动</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

requestAnimationFrame（parallaxbubbles）

//在下一个可用的屏幕画面上调用parallaxbubbles（）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}，

false

）</font></font><font></font>

<font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

</ SCRIPT></font></font>

ITPub博客

使用CSS和JavaScript创建基本的视差滚动效果（2）

Parallaxing气泡

最新文章