18 个使用 jQuery 和 HTML5 的视差滚动教程 – 2022
已发表: 2022-03-17自 1940 年代后期以来，视差一直在使用，最近被用于游戏等行业，为所有人创造独特的游戏体验。 说真的，视差对于设计师来说可能听起来像是一件新鲜事。 尽管如此，这个概念已经伴随我们很久了，以至于设计师现在才赶上来，并围绕这种滚动效果建立了一种趋势。 为了最好地缩小视差的描述范围，它是网页设计中的一种独特技术，它允许单个网页组件以不同的时间间隔在用户旁边滚动，这有助于在任何容器/网格/上下文后面创建移动背景的效果。
在 Colorlib，我们尽最大努力尽可能地关注视差，同时在每篇文章中保持独特方法的一致性：
我们现在想介绍最好的视差滚动教程，这些教程涉及使用 jQuery、JavaScript、HTML5 和 CSS3 等技术。 我们专注于对网页设计新手友好的教程和一些中间部分来解释视差的基础及其工作原理。
在我们进入教程之前，有两个方面需要仔细研究：视差滚动对搜索引擎优化的影响。 使用动态设计功能肯定会对搜索引擎处理您的网站的方式产生影响，并且您不想满足于可能对您的自然流量产生不良影响的功能。 Moz 的 Carla Dawson 详细介绍了这个主题。 她的帖子的主要内容是列出了 3 种独特的技术，您可以应用这些技术使您的视差设计对 SEO 更加友好。 这一切甚至在您尝试对您的设计产生功能性视差效果之前就开始了，首先实施 SEO 方法，然后专注于创建内容，这样您就可以为搜索引擎留出空间来了解您的网站是如何工作的，同时也允许机器人来处理内容。
第二个方面是视差设计的用户体验，是否适合所有的设计，可能会带来什么样的问题。 这是一篇关于视差设计对用户体验影响的深入研究，因此需要一些时间来充分处理和理解这篇论文。 这项研究对两组人进行了研究，他们都给出了样本网站进行探索：视差和标准滚动。 最终结果并不令人惊讶，用户确实更喜欢视差滚动，但这是以混乱为代价的，并且就注意力而言，一般的可用性问题。 您应该始终优先考虑用户而不是对您的网站设计进行花哨的添加，如果这意味着聘请专业的专家设计师来分析您，那么您应该推进这个想法，特别是如果您开展大规模的业务运营。 根据我们自己的经验，小型网站通常可以使用视差滚动，它对用户体验或一般可用性没有那么大的影响。
现在我们已经涵盖了这两个主题，我们可以开始学习一些关于如何实现视差滚动和创建视差滚动效果的技术和方法。 第一篇教程来自 Petr Tichy，他从事前端工作多年，是该领域的老牌专业人士。 您将了解视差的初始设置阶段、如何添加也集成了视差的动画效果，以及如何为每个动画分配适当的时间。 本教程在某些方面有点复杂，因此面向具有 JavaScript 知识的中级开发人员。 在同一教程中，您将找到 Petr 早期关于视差的教程之一的链接，该教程对初学者更友好。
Ian Yates 在今年早些时候写了这个教程，这可能是我们将在这个视差教程集合中介绍的关于这个主题的最新教程之一。 伊恩从另一个使用了很好的视差效果组合的网站中汲取灵感，并尝试自己重新创建它。 唯一的是，他主要谈论具有视差功能的特色设计，并提到了一个关于如何使用 JS 和 CSS 创建独特背景效果的小片段。
客户对设计标准没有太多了解，客户只关心趋势和诸如使网站看起来非常酷之类的事情，并且对于任何可以称为竞争的事物来说都是独一无二的。 如果您正在与此类客户合作，那么关于如何在设计上创建独特滚动效果的简明教程将是必不可少的，并且认为我们这里有一个可以完成工作的教程，就像那样。 您将学习如何构建使用 CSS3 样式的 HTML5 代码，然后使用 jQuery 构建视差效果。
Script Tutorials 的教程已经吸引了超过 17,000 名设计师和开发人员，这个数字引起了我们的兴趣，因为这意味着教程必须真正有效，并且应该提供流畅的视差运动体验。 经过一些本地测试，看起来确实如此。 HTML 和 CSS 的通常视差方法，您真正需要做的就是将这两个代码复制并粘贴到您的设计中，您应该一切顺利。 不过，我们可以想象这在您需要为自定义设计实现它的情况下会更加困难，因此也许我们需要继续寻找可以帮助解决此问题的整体教程。
Andy Shora 或许可以在这方面为我们提供帮助。 他的主要目标是创建一个不影响网站性能的视差效果，实现方式是：最小化滚动事件的 DOM 交互量，以及使用硬件加速来提高移动设备的性能。 实际上，这是另一个真正了解移动设备与视差交互方式的指南，以及如何在不损失质量或设计吸引力的情况下推动最大性能。 您将探索两个不同的 jQuery 片段，它们用于在任何网站设计中创建性能最佳的视差效果。
因为视差是一种新技术（好吧，现在已经有几年了，但仍然如此）它为想要为旧版 Web 浏览器实现视差的开发人员带来了很多挑战，所以这个过程并不容易，并且需要对旧浏览器如何使用新的 Web 功能有一点了解。 本教程继续展示视差网站之间的好例子和坏例子，以及在分析过程中可以学到什么。 它继续讨论不同的视差角度，例如垂直和水平——现代网页设计的可能性确实已经发展到一个新的水平。 您将学习与视差相关的最有用的 JavaScript 库，每个库都有在线文档和单独的教程，我们想自己分享这些库，但数量不是太多，所以您将了解本教程中的所有内容。 对于所有视差而言，这是一个真正精彩的资源，尤其是实现动态滚动效果的交互和不同方式。
如何创建简单的视差效果
Sara Vieira 虽然是一位出色的开发人员，但在涉及视差等主题时不会乱用复杂的代码或术语。 她更喜欢创建一种简单的技术来实现所需的结果，并让您按照自己的节奏试验她共享的代码。 您将尝试使用三巨头：JS、HTML 和 CSS。 最好的实验方法是在本地网络服务器上，或者在你的实时服务器上的一个单独的文件夹中，看看你可以通过这种方式获得什么样的结果。
jQuery 的视差效果
本教程的好处在于，它已经在您正在查看的页面中实现，因此实际上没有太多需要书面解释，而是以实时代码的形式给出示例。 您可以抓取 HTML/CSS 片段并将其与 jQuery 片段结合，以实现与您正在查看的页面相同的视差效果。 每个代码片段的右侧都有一些描述（注释）片段。
最终，您希望尽可能多地依赖 CSS。 CSS 意味着更好的性能，并减少处理像 jQuery 这样的动态语言的麻烦。 您在这里拥有的是一个简单的 CSS 片段，它将视差您的内容容器并使内容体验更加丰富，并具有出色的性能基准。
Stellar.js 是一个相当流行的 JavaScript 库，旨在帮助您快速向您的网站添加视差效果。 尽管该库在去年没有太大的发展，但它仍然被整个社区的开发人员和设计人员积极使用。 您将探索如何将 Stellar 融入您的设计中，以便为某些元素赋予视差效果。 库绝对是插入此类动态功能的安全选择，因为如果需要，它可以轻松地从主要开发工作流程中分离出来。
使用视差使您的 WordPress 网站流行
视差在许多不同的环境中使用，人们不得不想知道是什么让用户回到这个令人兴奋的功能，对于许多人来说——原因是能够通过使用平滑的滚动动画来讲述更好的故事，读者从故事的一部分到另一部分，以那美妙的流畅动作。 那么WordPress博客呢，我们如何在不使用支持该功能的独特主题的情况下为WordPress添加视差？ 如果这是您真正迫切需要解决的问题，您将在以下教程中找到所有答案。 我们觉得这是最全面的 WordPress 博客视差教程，我们希望您能尽快将这些出色的效果添加到您自己的博客中。 如果您已经知道视差的作用，请跳过介绍，本指南中有很多内容专门用于详细解释视差，因此请避免任何感觉您已经知道的内容。
什么是维克斯？ 它是网络上领先的免费网站建设平台，这些家伙一直在做生意！ 这不是一个教程，而是为与客户打交道的开发人员以及喜欢使用 Wix 等平台来托管和构建其网站的客户提供的提示。 现在Wix用户也可以享受视差效果了，他们有很多很好的演示给你看，以吸引你。我们当然是开玩笑的，使用Wix可以节省很多时间来构建一个独特的设计，而且令人惊讶的是对网站的需求并没有减少，即使客户只要花一点额外时间来了解他们用来托管网站的平台，他们自己就可以实现这些伟大的设计。 不要害怕为新客户提供使用 Wix 或任何其他网站构建平台托管他们的网站的机会。 就网站维护而言，这是朝着正确方向迈出的一步，在某些情况下； 表现也。
使用 CSS 的景观视差
视差设计有很多选择，所以只要你知道自己作为设计师和前端开发人员在做什么，你就可以将任何东西变成视差效果，甚至只用一点 CSS 和 jQuery 就可以复制风景魔法！ Dave Chenell 将带您完成创建视差景观设计效果所需的步骤。
如何使用 CSS 和 Javascript 制作多层视差插图
分层视差效果包括使用两个相互叠加的图像来展开特定的视觉场景。 这将进一步增强您的用户对您的设计/网站的视觉体验，这也是探索手绘艺术及其在网站设计中的可能性的绝佳机会，因为大多数情况下您会想要使用一些东西正如您将在演示预览中看到的那样，它们可以相互叠加并完全有意义。
纯 CSS 视差网站
很好的介绍教程，使用视差创建实体滚动效果，只使用原生 CSS。
重新创建 Firewatch 视差效果
视差被称为很多名字，并且绝对有一群忠诚的设计师/开发人员绝对讨厌视差趋势，但是你能做什么，它似乎对这么多人有用，所以为什么要停止制作教程和内容呢？如何实时实现这种效果。 我们在这里的教程将重新创建来自 Firewatch 网站的特定效果，以创建一种与下降元素相结合的景观效果，以允许内容的额外展开。 起初听起来很棘手，但 Hamish（本教程的作者）非常注意逐步解释所有内容。
无论您有什么要求，我们认为我们列出的教程将绝对涵盖这一新兴网页设计趋势的所有方面。 从简单的效果到性能优化的效果，再到提供可记住超过几分钟的内容体验的独特方法。 网页设计中发生的大部分事情都归结为灵感，以及如何通过设计熟练度实现的独特曲折来激发用户和读者。