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

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

 视差滚动效果的解剖

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

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

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

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

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

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

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

 与背景和泡沫的起始页

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

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

HTML标记是准系统:


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

身体{
 身高:2000px;
 背景:海军网址(deepsea.jpg)顶部中心无重复固定;
 背景尺寸:封面;
}

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

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

#bubbles1,#bubbles2 {
 宽度:100%;
 身高:100%;
 顶部:0;
 左:0;
 位置:固定;
 z-index:-1;
 background:url(bubbles1.png)5%50%不重复;
}

#bubbles2 {
 background:url(bubbles3.png)95%90%不重复;
}

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

 Parallaxing气泡

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

演示: 带有parallaxing气泡的页面

JavaScript的:


                    
                    

你可能感兴趣的:(底层代码)