ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > IT职业 > IT职场 > 使用CSS和JavaScript创建基本的视差滚动效果（4）

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

原创 IT职场 作者：cenfeng 时间：2019-07-29 15:54:15 0 删除 编辑

JavaScript的：

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
<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 style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
var fish = document.getElementById（ 'fish' ）</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
var scrollheight = document.body.scrollHeight //整个文档的高度</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
var windowheight = window.innerHeight //浏览器窗口的高度</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;">
  var scrollamount =（scrolltop /（scrollheight-windowheight））* 100 //滚动量（以％为单位）</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;">
  fish.style.left = -100 + scrollamount + '％' //设置鱼的位置百分比（从-100％开始）</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;" >
window.addEventListener（ 'resize' ， function （）{ //在窗口调整大小</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;">
  var scrollamount =（scrolltop /（scrollheight-windowheight））* 100 //滚动量（以％为单位）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  fish.style.left = -100 + scrollamount + '％' //设置鱼的位置百分比（从-100％开始）</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>

我们首先在页面中添加ID为“fish”的DIV（查看演示页面源代码），然后 fish 在我们的JavaScript中使用“ ”变量引用它。接下来是两个变量，它们分别得到文档的总高度和浏览器窗口的高度：

1
2
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var scrollheight = document.body.scrollHeight //整个文档的高度</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
var windowheight = window.innerHeight //浏览器窗口的高度</font></font>

在 parallaxbubbles() 函数内部，我们可以准确计算出滚动条的滚动范围是整个可滚动轨道的百分比（其中0表示滚动条位于最顶部，100％表示位于最底部）使用此魔术线：

1
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var scrollamount =（scrolltop /（scrollheight-windowheight））* 100 //滚动量（以％为单位）</font></font>

子操作 (scrollheight-windowheight) ，或从文档的总高度中减去窗口的高度，使我们知道滚动条在到达文档底部之前能够行进的总距离。正是这一点，我们希望我们的鱼对象位于窗口的右边缘。

当我们划分 scrolltop （滚动条当前行进了多少）时 (scrollheight-windowheight) ，我们得到滚动条行进的距离，作为总距离的百分比。乘以100可将该信息转换为百分比值，其中0表示滚动条位于最顶部，100表示滚动轨迹的最末端：

现在我们知道滚动条按百分比滚动了多少，我们可以直接将该值作为鱼图层 left 属性的一部分提供，并按比例移动滚动条滚动的数量：

1
fish.style.left = -100 + scrollamount + '%' // set position of fish in percentage (starts at -100%)

-100 添加该值 left ，使鱼的初始位置为-100％，将其隐藏在视野之外。当用户滚动页面时，该值逐渐增加，直到达到0％。那时鱼出现在窗口的右边缘（实际的鱼图像显示为位于鱼群内部最右侧的背景）。




来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69933200/viewspace-2651850/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： 使用CSS和JavaScript创建基本的视差滚动效果（3）
下一篇： 怎么把qlv格式转换成mp4？快速转换qlv格式的方法
请登录后发表评论 登录
全部评论
cenfeng

注册时间：2019-06-18

  • 博文量
    125
  • 访问量
    129476

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593