如何创建一个视差效果的网站呢，在这篇文章中我们将为你介绍通过JavaScript创建视差效果，而没有使用任何第三方库例如jQuery等，在视差效果的制作中，网页中的不同元素以不同的速度移动，一般来讲，离用户越远的物体移动速度要比近的物体速度慢，反之亦然。

如何创建视差效果的网站

动画

就像任何动画，你改变一些动作的基础上，其他的东西，像时间。然而在这种情况下，你是在你网站的部分相对于观察者位置的页面上。
动画的速度控制如何快速访客向下滚动页面。这意味着，观众可以控制动画到底有多快。如果客人卷轴真的很快，动画将进步真快。如果客人卷慢，动画将进展缓慢。
这将创建一个动画的访客来决定如何快速移动。当你快速移动通过网页翻页的书之一，它看起来像一个运动图像。不同的视频，你的用户来决定如何调节时间进展。
而视差通常是用来使背景比其他的页面更缓慢地移动，它也可以被用来使物体移动更迅速。这将使他们看起来像是接近我们的用户。
简单视差教程
我们将创建一个非常简单的视差网站。这将使背景更慢比其他的页面作为你向下滚动。
点击这里查看 live parallax demo。
JavaScript代码
我们将把这个JavaScript代码在一起，一块一块的：

var topDiv = document.getElementById("topDiv");
var speed = 1.5;
window.onscroll = function(){
    var yOffset = window.pageYOffset;
    topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";
}

对于视差工作，我们需要调整背景元素的顶部。在这种情况下，它是包含在同一个div的ID：topdiv，存储在一个变量命名topdiv。背景的位置调整通过改变backgroundposition的元素：

var topDiv = document.getElementById("topDiv");
topDiv.style.backgroundPosition =

我们将设置它的x位置0；我们没有做任何视差滚动。

var topDiv = document.getElementById("topDiv");
topDiv.style.backgroundPosition = "0px "

我们将必须指定我们“topdiv“div的一小部分，我们有多远向下滚动页面。我们可以使用window.pageyoffset。我们将它存储在一个变量使yOffset。

var yOffset = window.pageYOffset;

我们还需要知道如何慢，我们希望我们的背景移动。我们将分使yOffset我们的速度。我们将使用值1.5。
var speed = 1.5;
在我们继续之前，您的代码应该看起来像：

var topDiv = document.getElementById("topDiv");
var speed = 1.5;
var yOffset = window.pageYOffset;
topDiv.style.backgroundPosition = "0px "

我们现在将结束设定背景的Y位置使yOffset/speed。

var topDiv = document.getElementById("topDiv");
var speed = 1.5;
var yOffset = window.pageYOffset;
topDiv.style.backgroundPosition = "0px " + (yOffset / speed) + "px";

最后，我们希望这个代码运行每次滚动页。因此我们将把它变成一个window.onscroll = function()功能。

var topDiv = document.getElementById("topDiv");
var speed = 1.5;
window.onscroll = function(){
    var yOffset = window.pageYOffset;
    topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";
}

HTML代码
这是我们的基本的HTML。我们将改变的背景topdiv元素。

给HTML添加CSS
接下来，我们将添加一些基本的造型。指定图像，我们将使用作为背景，在这种情况下img1.jpg。随意改变任何你希望的形象。我们将使我们的DIV元素的高度1500px，但是你可以让它像你想象的一样高。

添加JavaScript

接下来，我们需要添加JavaScript。这是我们之前创建的脚本一样。

最终的代码
完整的代码看起来应该是下面的这个样子