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

Posted 2021-01-08 cddehsy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用CSS和JavaScript创建基本的视差滚动效果相关的知识，希望对你有一定的参考价值。

网页设计中2015年最主要的趋势无疑是视差滚动效应，没有任何迹象正在减弱。视差滚动将页面转换为有趣的幻灯片，其中页面上的不同元素相对于页面的滚动以不同的速度移动。在本教程中，我们将熟悉如何在CSS和javascript中创建基本的视差滚动页面，并深入了解整个过程中的shebang。

? 视差滚动效果的解剖

维基百科简洁地将视差滚动效果定义为：

“计算机图形学中的一种特殊的滚动技术，其中背景图像通过相机移动比前景图像慢，在2D视频游戏中产生深度幻觉并增加沉浸感。”

由于它属于网页，视差效果与页面的滚动有关; 当执行此动作时，页面上的不同元素（例如背景图像和前景元素）以相对于滚动条的不同速度移动/动画，所有这些元素都使用JavaScript进行编排。看一下下面的简单视差滚动示例，它包含一个大的背景图像以及相对于滚动条以不同速度移动的3个图层：

演示：简单的视差滚动效果

任何视差效果中使用的JavaScript都有效地完成以下两件事：

通过检查诸如的关键属性，精确监控文档滚动的程度和变化率 window.pageYOffset。
通过调用窗口onscroll事件中的代码，在文档滚动时相对于滚动条为页面上的各种元素设置动画。

让我们一步一步解释如何将上面的视差效果放在一起，并通过它，将神秘主义者从它中解放出来！

? 与背景和泡沫的起始页

首先，我们将构建基本页面，只有深海背景和两个大气泡，没有鱼或JavaScript妨碍我们：

演示： 初始页面有两个气泡

html标记是准系统：

<span style="color:#000000"><BODY>
<div id =“bubbles1”> </ div>
<div id =“bubbles2”> </ div>
</ BODY></span>

观察页面上的不同图层以及它们的位置。BODY元素仅用于显示大型深海背景图像：

<span style="color:#000000">身体{
 身高：2000px;
 背景：海军网址（deepsea.jpg）顶部中心无重复固定;
 背景尺寸：封面;
}</span>

background-size: coverCSS3属性确保图像覆盖元素的整个区域; 它使用背景图像抹去我们身体每一寸的轻微工作，虽然这个属性是资源密集型的，并且应该在视差滚动应用中使用约束。

然后是我们的两个泡泡。每个都呈现为DIV的背景图像，该DIV固定在页面上并位于页面的左上角：

<span style="color:#000000">＃bubbles1，＃bubbles2 {
 宽度：100％;
 身高：100％;
 顶部：0;
 左：0;
 位置：固定;
 z-index：-1;
 background：url（bubbles1.png）5％50％不重复;
}

＃bubbles2 {
 background：url（bubbles3.png）95％90％不重复;
}</span>

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

? Parallaxing气泡

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

演示： 带有parallaxing气泡的页面

JavaScript的：

<span style="color:#000000"><SCRIPT>

//创建跨浏览器requestAnimationFrame方法：
window.requestAnimationFrame = window.requestAnimationFrame
 || window.mozRequestAnimationFrame
 || window.webkitRequestAnimationFrame
 || window.msRequestAnimationFrame
 || function（f）{setTimeout（f，1000/60）}

var bubble1 = document.getElementById（‘bubbles1‘）
var bubble2 = document.getElementById（‘bubbles2‘）

function parallaxbubbles（）{
 var scrolltop = window.pageYOffset //获取文档垂直滚动的像素数 
 bubble1.style.top = -scrolltop * .2 +‘px‘//以20％的滚动速率移动bubble1
 bubble2.style.top = -scrolltop * .5 +‘px‘//以50％的滚动速率移动bubble2
}

window.addEventListener（‘scroll‘，function（）{//页面滚动
 requestAnimationFrame（parallaxbubbles）//在下一个可用的屏幕画面上调用parallaxbubbles（）
}，false）

</ SCRIPT></span>

让我们分解这里发生的事情。现在忽略requestAnimationFrame（）方法，首先，我们通过它们的ID引用两个气泡层。在parallaxbubbles()函数内部，我们将每个气泡移动当前垂直滚动量的一小部分，从而使气泡相对于滚动以不同的速度移动。在scrolltop 变量前面添加的负运算符会导致每个气泡在滚动的相反方向上移动。

继续，我们点击scroll窗口对象的“ ”事件，以便在窗口滚动时执行代码。但是parallaxbubbles()，我们不会直接在这个事件中直接调用，而是采取更加迂回的路线，有利于性能而不是简洁。而这条路线涉及parallaxbubbles()在JavaScript的requestAnimationFrame()方法中间接调用。后者是一个JavaScript方法（具有取决于浏览器的各种前缀版本），它接受函数引用并在下一个可用的屏幕重绘上执行该函数scroll事件，我们可以期望快速连续调用代码 - 优化性能然后是关键，并在内部应用任何动画代码requestAnimationFrame()

? 一种在屏幕上水平移动的parallaxing鱼

因此，我们现在有一个带有两个平行气泡的页面，每个气泡与滚动相比都以较低的速率移动。没有逻辑规定相对于文档滚动的程度，页面上的气泡应该精确到位。

对于下一个对象，我们将是parallaxing，让我们对它进行排列，使对象从窗口的左边缘向右滑动，与滚动条同步。当滚动条位于最顶部时，对象位于左边缘，逐渐移动，直到滚动条位于最右端，此时对象将位于右边缘。鱼对象的位置与其他图层的位置相似，但靠近窗口的左侧和底部。

演示：带有parallaxing气泡和鱼的页面

CSS：

<span style="color:#000000">＃bubbles1，＃bubbles2，＃fish {
 宽度：100％;
 身高：100％;
 顶部：0;
 左：0;
 位置：固定;
 z-index：-1;
 background：url（bubbles1.png）5％50％不重复;
}

＃鱼{
 左：-100％;
 background：url（fish.png）对90％不重复;
}</span>

JavaScript的：

<span style="color:#000000"><SCRIPT>

//创建跨浏览器requestAnimationFrame方法：
window.requestAnimationFrame = window.requestAnimationFrame
 || window.mozRequestAnimationFrame
 || window.webkitRequestAnimationFrame
 || window.msRequestAnimationFrame
 || function（f）{setTimeout（f，1000/60）}

var bubble1 = document.getElementById（‘bubbles1‘）
var bubble2 = document.getElementById（‘bubbles2‘）
var fish = document.getElementById（‘fish‘）

var scrollheight = document.body.scrollHeight //整个文档的高度
var windowheight = window.innerHeight //浏览器窗口的高度

function parallaxbubbles（）{
 var scrolltop = window.pageYOffset //获取文档垂直滚动的像素数 
 var scrollamount =（scrolltop /（scrollheight-windowheight））* 100 //滚动量（以％为单位）
 bubble1.style.top = -scrolltop * .2 +‘px‘//以20％的滚动速率移动bubble1
 bubble2.style.top = -scrolltop * .5 +‘px‘//以50％的滚动速率移动bubble2
 fish.style.left = -100 + scrollamount +‘％‘//设置鱼的位置百分比（从-100％开始）
}

window.addEventListener（‘scroll‘，function（）{//页面滚动
 requestAnimationFrame（parallaxbubbles）//在下一个可用的屏幕画面上调用parallaxbubbles（）
}，false）

window.addEventListener（‘resize‘，function（）{//在窗口调整大小
 var scrolltop = window.pageYOffset //获取文档垂直滚动的像素数
 var scrollamount =（scrolltop /（scrollheight-windowheight））* 100 //滚动量（以％为单位）
 fish.style.left = -100 + scrollamount +‘％‘//设置鱼的位置百分比（从-100％开始）
}，false）

</ SCRIPT></span>

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

<span style="color:#000000">var scrollheight = document.body.scrollHeight //整个文档的高度
var windowheight = window.innerHeight //浏览器窗口的高度</span>

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

<span style="color:#000000">var scrollamount =（scrolltop /（scrollheight-windowheight））* 100 //滚动量（以％为单位）</span>

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

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

技术分享图片 ?

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

<span style="color:#000000">fish.style.left = -100 + scrollamount +‘％‘//设置鱼的位置百分比（从-100％开始）</span>

-100left鱼的位置是-100％，将它隐藏起来。当用户滚动页面时，该值逐渐增加，直到达到0％。这就是当窗口右边缘的鱼应用耳朵（实际的鱼形图像应用耳朵作为背景定位在鱼群内部的最右侧）。

以上是关于使用CSS和JavaScript创建基本的视差滚动效果的主要内容，如果未能解决你的问题，请参考以下文章

使用滚动按钮创建视差效果

视差滚动部分不固定/100% 高度？

结合用户滚动+动画css3/Javascript

使用 CSS 使用视差效果滚动

Javascript - 使用鼠标滚轮平滑视差滚动

在纯 CSS 视差中平滑滚动