网页设计中启动画面的 10 个戏剧性例子

想要一个戏剧性的入口？ 想要在用惊人的动画、高端库的实验或巧妙的设计让他们震惊之前先让他们热身吗？ 那么您可能应该将目光放在启动画面上。

来自桌面软件的世界，它成功地扎根于网页设计。 它轻快、快速、轻巧、相对简单且功能强大。 我们总是谈论最初的几秒钟是如何改变世界的。 一切都应该从一开始就完美。 启动屏幕是 Web 应用程序的组件之一，与此任务的成功直接相关。

大多数人认为英雄区域是创造这种宝贵第一印象的背后。 然而，也有一些严谨而勤奋的代码艺术家喜欢点 i 和交叉 t，相信每一秒都很重要。 嗯，就是这样。

你越早开始为你的在线观众加油，你会给你留下更好的第一印象。 这就是为什么我们在这个领域见证了各种原创解决方案。 事实上，事实上，他们打开了网站和观众之间的对话。 如果你认为加载器没有能力展示你的创造力，那么闪屏肯定有一些潜力。

利用全屏

通过启动动画，整个屏幕都为您服务，而不仅仅是一个小元素。 它们就像电影片头片尾片段，向观众承诺令人难以置信的东西，从而引发兴趣。

泰德·阿库里的《SmokeT》

Three.js 不是创建快速和轻量级介绍的好伴侣，但在 Tedd Arcuri 的情况下，它确实可以解决问题。 这里巧妙地再现了高度逼真的烟雾效果，增强了字母“T”的外观。 后者在这里纯粹是象征性的，因为它可以很容易地变成一个标识、吉祥物或标题。

.

蒂莫西·吉布林 (Timothy Giblin) 的启动页面

大多数启动画面都与品牌标识密切相关。 例如，Timothy Giblin 的 Splash page。 这是一个 100% 经典的闪屏，具有丰富的品牌标识和艺术家的创造性思维。 作者向我们展示了如何坚持中庸之道。 他的概念是原创的，同时也是谦虚的。 它只展示了一个标识，但这种展示引人注目。

Hitesh Sahu 的启动画面动画

这个例子不如 Timothy Giblin 的解决方案那么令人印象深刻，但它更实用，如今随处可见。 从本质上讲，它只是将延迟加载提升到了一个新的水平。 将首页的元素一一展现，趣味性十足，创意十足。

还有一些更令人兴奋的代码片段。 让我们一起探索该系列，并为您的下一个项目找到最佳匹配。

经典解决方案

希望对启动画面使用更可靠的方法？ 下面的示例将帮助您实现目标。

亚当布鲁姆的闪屏

传统的滑动效果是 Adam Blum 解决方案之美的背后。 它包括一个干净、纯粹的背景和几个一个接一个出现的关键短语。 它利用了预期的力量：激发用户兴趣的原始但可行的方式。

Nirajan 继续播放

为了使之前的解决方案更有趣，您可以添加带有背景的操作，就像 Niranjan 在这支笔中所做的那样。 他的项目 Play On 在应用于图像背景的半透明覆盖屏幕之间具有可爱的滑动过渡。 很好很有趣。

威廉姆斯的我的飞溅

威廉姆斯的 My Splash 是经典闪屏的另一个代表性示例。 这个概念有两个阶段。 起初，动画以温和舒适的节奏显露作者的签名。 之后，出现黑屏。 这是一个优雅、时尚且实用的解决方案，适用于众多项目。

Dmytro Lvivsky 的动画启动画面

Dmytro Lvivsky 的动画启动画面是创建您自己的解决方案的完美起点。 JavaScript 驱动的动画有几个屏幕，每个屏幕之间都有一个传统的过渡。 后者基于一个圆圈引导游戏的效果。

请参阅 Dmytro Lvivsky (@UnforbiddenYet) 在 CodePen 上的 Pen Animated Splash Screen。

Giles Papworth 的简单 CSS3 渐变

这是一个非常简单的解决方案。 套路在于逐块显示文本，并伴随着由来已久的褪色效果。 然而，它做了它应该做的一切。 而且，最重要的是，它不会“吃掉”你宝贵的资源，因为它只使用 CSS3。 它简单、优雅、谦虚和轻巧。

情绪二传手

以下示例表明，启动画面也可用于从一开始就为网站设置基调。

Andrew Tunnecliffe 的控制台加载动画

例如，如果您是编码员，那么 Andrew Tunnecliffe 的控制台加载动画将营造适当的氛围。 它是老派的，它非常简单，并且与开发人员的任何个人投资组合都非常相配。

下降的数字由 Thibault Jan Beyer

如果您有一个基于统计或数据驱动的项目，那么 Thibault Jan Beyer 的 Falling Numbers 是您讲故事的良好开端。 动画以下降的数字开始，最终落地并打开主屏幕。 它具有几何魅力，并带有一些数字香料。

最后但并非最不重要的

对于很多人来说，斯坦李永远是“李小龙的书呆子兄弟”。 对我们来说，他是站在善战胜恶的宇宙背后的偶像，他将永远活在我们心中。

马特·范斯坦的漫威闪屏

Matt Feinstein 的 Marvel Splash Screen 并不完全是致敬，但所有超级英雄粉丝都会喜欢它。 标题不言自明。 他的飞溅动画有一种奇妙的漫画书氛围。 这是漫威电影开场序列的复制品，看起来令人难以置信。

如何引起轰动

启动屏幕可以用作装载机的替代品——当然，除非它们很重。 不幸的是，仍然有人过于认真地对待它们，并试图将它们转变为戏剧中充满动感的部分。

网页设计中的启动画面是有效的，只要它们快速、短、轻量且直截了当。 当然，它们为您提供了展示您的天才的整个屏幕。 不过，您应该坚持其最初的使命。 它们是飞溅的东西，应该激起人们的兴趣并立即将接力棒传递给更令人兴奋的解决方案。