经过

随着浏览器技术的改进,JavaScript已经属于年龄,框架等框架允许我们推动HTML页面中可能的信封。


在本教程中,SAM Hampton-Smith显示了如何使用视差滚动的原则在网页上创建交互式图像。

视差滚动有助于在场景内传送深度和距离。进一步远离的物体比那些关闭更慢。

在20世纪80年代的视频游戏中非常受欢迎,它曾经是不可能在不诉诸闪光的情况下创建浏览器。

但是,最新一代的浏览器,JavaScript引擎和CSS可能使视差效果成为可能。

我们将以不同的大小创建一系列图形,堆叠它们,并在视口中以不同的速率移动它们。然后,我们将创建一些简单的jQuery代码以将图层移动,因为鼠标移动。

我们创建的代码足够灵活,以应对令人信服的交互式结果,以应对视差的多层视图。

对于有代码输入的所有步骤,您将在封面CD上找到带有相关代码的文本文档,以便简单地将其复制粘贴;每个文档都以与其相关的步骤命名。


Step 1
打开 DESOLATION.AI. 来自封面CD - 或从Illowerator中提供的ZIP文件,或者如果您更喜欢,请在Illustrator或Photoshop中创建您自己的一些艺术品。将每个距离平面分隔到新的图层或新文件中,以便稍后单独保存这些距离。

请记住,当您更接近相机点时,这些层上的对象需要更大。在插画家中,这很好,因为向量是可调整的,但在Photoshop中,您需要提前计划。



Step 2
关闭除天空外的所有层,然后选择 File > Save for Web & Devices。我们的观点或“相机”宽度为960像素,我们希望天空移动一点,但不是太多,因此通过进入“图像尺寸”选项卡并进入宽度以980像素保存此图像980像素。使用PNG-24预设并保存。

笔记: 我们可以在通过我们网站上的链接购买时赚取佣金,而不额外费用给您。这不会影响我们的编辑独立性。 了解更多.

阅读下一个......