20 个使用 jQuery 和 HTML5 的视差滚动教程 – 2017

视差自 1940 年代后期开始使用，最近在游戏等行业中使用，为所有人创造独特的游戏体验。 说真的，视差对设计师来说可能听起来像一个新事物，但这个概念已经伴随我们很久了，设计师现在才赶上来，并明确地围绕这种滚动效果建立了一种趋势。 为了最好地缩小对视差的描述，它是网页设计中的一项独特技术，它允许单个网页组件以不同的时间间隔与用户一起滚动，从而可以在任何容器/网格/上下文后面创建移动背景的效果。

在 Colorlib，我们尽最大努力尽可能关注视差，同时在我们的每篇文章中保持独特方法的一致性：

• 令人惊叹的视差滚动 WordPress 主题
• HTML5/CSS3 视差网站模板
• 免费视差滚动 WordPress 主题
• 在哪里可以找到高级和免费的视差 WordPress 主题
• 具有视差滚动效果的最新 WordPress 模板

我们现在想介绍最好的视差滚动教程，这些教程涉及使用 jQuery、JavaScript、HTML5 和 CSS3 等技术。 我们专注于对网页设计新手友好的教程，但也有一些中间部分来真正解释视差的基础及其工作原理。

视差滚动网站和 SEO

在我们进入我们的教程和所有这些之前，有两个方面需要仔细研究，其中之一是视差滚动对搜索引擎优化的影响。 使用动态设计功能肯定会对搜索引擎处理您网站的方式产生影响，并且您不想满足于可能对您的自然流量产生不良影响的功能。 来自 Moz 的 Carla Dawson 详细介绍了这个主题。 她的帖子的主要内容是列出了 3 种独特的技术，您可以应用这些技术使您的视差设计对 SEO 更加友好。 这一切甚至在您尝试对您的设计产生功能性视差效果之前就开始了，首先实施 SEO 方法，然后专注于创建内容，这样您就可以为搜索引擎了解您的网站如何工作留出空间，同时也允许机器人来处理内容。

网页设计中视差滚动对用户体验的影响

第二个方面是视差设计的用户体验，是否适合所有的设计，可能会导致什么样的问题。 这是对视差设计对用户体验的影响的深入研究，因此请注意，完全处理和理解本文需要一些时间。 该研究采用了两组人，他们都获得了样本网站进行探索：视差和标准滚动。 最终结果并不奇怪，用户确实更喜欢视差滚动，但这是以混淆为代价的，并且就注意力而言，普遍存在可用性问题。 您应该始终优先考虑用户而不是网站设计的花哨添加，如果这意味着聘请专业的专家设计师为您进行分析，那么您应该继续这个想法，特别是如果您经营大规模的业务运营。 根据我们自己的经验，小型网站通常可以通过使用视差滚动来摆脱困境，并且它对用户体验或一般可用性没有那么大的影响。

简单的视差滚动教程

现在我们已经涵盖了这两个主题，我们可以开始学习一些关于如何实现视差滚动以及如何创建自己的视差滚动效果的实际技术和方法。 第一个教程来自Petr Tichy，他从事前端工作多年，是该领域的资深专家。 您将学习视差的初始设置阶段，如何添加视差集成的动画效果，以及如何为每个动画分配适当的时间。 本教程在某些方面有点复杂，因此面向具有先前 JavaScript 知识的中级开发人员。 在同一教程中，您将找到指向 Petr 早期关于视差的教程之一的链接，该链接对初学者更加友好。

网页设计灵感：Scrollin', Scrollin', Scrollin'

Ian Yates 在今年早些时候编写了本教程，这可能是关于该主题的最新教程之一，我们将在此视差教程集中展示。 Ian 采用了从另一个使用出色视差效果组合的网站获得灵感的方法，并尝试自己重新创建它。 唯一的事情，他主要谈论具有视差特征的特色设计，并提到了一个关于如何使用 JS 和 CSS 创建独特背景效果的小片段。

视差滚动教程：如何制作视差网站

客户对设计标准没有太多了解，客户只关心趋势和诸如使网站看起来非常酷之类的事情，并且对于任何可以称为竞争的事物都完全独一无二。 如果您正在与此类客户合作，关于如何在设计上创建独特滚动效果的简明教程将是必不可少的，并且认为我们这里有一个可以完成工作的教程，就像那样。 您将学习使用 CSS3 构建 HTML5 代码的结构，然后使用 jQuery 构建视差效果。

简单的视差滚动效果

您将在此处重新创建的效果是针对简单设计的。 一种传统的视差效果，可沿着页面向下滚动视觉内容，不会使图像看起来像静态的，而是使它们更具动态性和与设计的交互性。 如今，不少 WordPress 主题也采用了这种视差技术，我们不能说它没有成功，因为它已经成功了。 您将制作包含内容的 HTML5“部分”，并使用纯 CSS3 使效果发挥作用。 仅通过使用 HTML5 + CSS3 组合，您就可以在浏览器集成方面节省大量性能点。

视差滚动教程

Script Tutorials 的教程已经有超过 17,000 名设计师和开发人员，这个数字引起了我们的兴趣，因为这意味着该教程必须真正有效，并且应该提供流畅的视差运动体验。 经过一些本地测试，看起来确实如此。 HTML 和 CSS 的通常视差方法，您真正需要做的就是将这两个代码复制并粘贴到您的设计中，您应该很高兴。 不过，我们可以想象这在您需要为自定义设计实现它的情况下会更加困难，因此也许我们需要继续寻找可以帮助解决此问题的整体教程。

如何使用 CSS 和 jQuery 在滚动上实现视差效果

Andy Shora 或许可以在这方面帮助我们。 他的主要目标是创建一种不会影响网站性能的视差效果，这是通过以下方式实现的：最小化滚动事件的 DOM 交互量，以及使用硬件加速来提高移动设备的性能。 实际上，这是另一个真正了解移动设备与视差交互方式的指南，以及如何在不降低质量或设计吸引力的同时推动最大性能。 您将探索两个不同的 jQuery 片段，它们用于在任何网站设计上创建性能最佳的视差效果。

视差滚动终极指南

因为视差是一种新技术（嗯，几年了，但仍然如此）它给想要为旧的 Web 浏览器实现视差的开发人员带来了很多挑战，这个过程并不容易，并且需要一个对旧浏览器如何与新网络功能配合使用的一些了解。 本教程继续展示视差网站之间的好坏示例，以及在分析过程中可以学到什么。 它还继续讨论不同角度的视差，例如垂直和水平——现代网页设计的可能性确实已经发展到一个新的水平。 您将学习与视差相关的最有用的 JavaScript 库，每个库都有在线文档和单独的教程，我们想自己分享这些库，但数量不是太多，所以您将了解本教程中的所有内容。 这是所有视差事物的真正精彩资源，尤其是实现动态滚动效果的交互和不同方式。

如何创建一个简单的视差效果

尽管 Sara Vieira 是一位出色的开发人员，但在涉及视差等主题时，她从不纠结于复杂的代码或术语。 她更喜欢创建一种简单的技术来实现所需的结果，并让您按照自己的节奏试验她共享的代码。 您将尝试三巨头：JS、HTML 和 CSS。 最好的实验方法是在本地 Web 服务器上，或在您的实时服务器上的单独文件夹中，看看您可以通过这种方式获得什么样的结果。

jQuery 的视差效果

本教程的好处在于，它已经在您正在查看的页面中实现了，因此实际上不需要用书面文本进行解释，而是以实时代码的形式给出示例。 您可以抓取 HTML/CSS 代码段并将其与 jQuery 代码段结合，以实现与您正在查看的页面相同的视差效果。 每个代码片段的右侧都有一些描述（评论）片段。

使用 CSS 创建滚动视差效果

最终，您希望尽可能多地依赖 CSS。 CSS 意味着更好的性能，以及处理像 jQuery 这样的动态语言的麻烦。 您在这里拥有的是一个简单的 CSS 片段，它将视差您的内容容器并使内容体验更加丰富，并具有出色的性能基准。

使用 Stellar.js 进行视差滚动简介

Stellar.js 是一个相当流行的 JavaScript 库，旨在帮助快速向您的网站添加视差效果。 尽管该库在去年没有太大的发展，但它仍然被整个社区的开发人员和设计人员积极使用。 您将探索如何将 Stellar 融入您的设计以便某些元素获得视差效果的过程。 库绝对是插入此类动态功能的安全选择，因为如有必要，它可以轻松地从主要开发工作流程中分离出来。

使用视差使您的 WordPress 网站流行起来

视差用于许多不同的环境，人们不得不想知道是什么让用户重新回到这个令人兴奋的功能，对于许多人来说——这个原因是能够讲述更好的故事，通过使用平滑的滚动动画，可以采取读者从故事的一个部分到另一个部分，以那种美妙的流动动作。 那么 WordPress 博客呢，我们如何在不使用支持该功能的独特主题的情况下为 WordPress 添加视差？ 如果这是您真正迫切需要解决的问题，那么您将在以下教程中找到所有答案。 我们认为这是 WordPress 博客最全面的视差教程，我们希望您很快将这些出色的效果添加到您自己的博客中。 如果您已经知道视差的作用，请跳过介绍，本指南中有相当多的内容专门用于详细解释视差，因此请避免任何感觉您已经了解它的内容。

使用视差滚动吸引您的站点查看者

什么是维克斯？ 它是网络上领先的免费网站建设平台，这些家伙一直在做生意！ 这不是一个教程，而是为与客户合作的开发人员以及喜欢使用像 Wix 这样的平台来托管和构建他们的网站的客户提供的提示。 现在Wix用户也可以享受视差效果了，他们有很多很好的演示给你看，以吸引你。当然我们在开玩笑，使用Wix可以节省很多时间来构建独特的设计，而且令人惊讶的是对网站的需求并没有减少，即使客户自己可以实现这些伟大的设计，只要他们花一点时间来了解他们用来托管网站的平台。 不要害怕为新客户提供使用 Wix 或任何其他网站建设平台托管他们的网站的机会。 就网站维护而言，这是朝着正确方向迈出的一步，在某些情况下； 表现也是。

使用 CSS 实现景观视差

视差设计你有很多选择，所以只要你知道你作为设计师和前端开发人员在做什么，你就可以把任何东西做成视差效果，甚至只用一点 CSS 和 jQuery 就可以复制一个风景魔法！ Dave Chenell 将带您完成创建视差景观设计效果所需的步骤。

如何使用 CSS 和 Javascript 制作多层视差图

分层视差效果包括使用彼此叠加的两个图像来展开特定的视觉场景。 这将进一步增强您的用户对您的设计/网站的视觉体验，这也是探索手绘艺术的可能性及其在网站设计中的结合的绝佳机会，因为大多数情况下您会想要使用某些东西正如您将在演示预览中看到的那样，它们可以相互叠加并完全有意义。

纯 CSS 视差网站

关于使用视差创建实体滚动效果的不错的介绍教程，只使用原生 CSS。

重现 Firewatch 视差效果

视差被称为很多名字，绝对有一群忠实的设计师/开发人员绝对讨厌视差趋势，但是你能做什么，它似乎对这么多人有用，所以为什么要停止制作关于视差的教程和内容？如何实时实现这种效果。 我们这里的教程将重新创建来自 Firewatch 网站的特定效果，以创建一种景观效果与下落元素相结合，以允许内容的额外展开。 起初听起来很棘手，但 Hamish（本教程的作者）很好地一步一步地解释了一切。

带有 CSS3、HTML5 和 jQuery 示例的视差滚动教程

无论您有什么要求，我们认为我们列出的教程将绝对涵盖这一新兴网页设计趋势的所有方面。 从简单的效果到性能优化的效果，再到提供内容体验的独特方法，可以记住超过几分钟。 网页设计中发生的大部分事情都归结为灵感，以及如何通过设计熟练程度实现的独特曲折来激励用户和读者。