网页设计中闪屏的10个生动例子
想引人注目地进入吗？你想在用你惊人的动画、高端图书馆的实验或仅仅是巧妙的设计惊艳访客之前先让他们热身吗？那么你可能应该把眼睛放在闪屏上。
它来自桌面软件世界，成功地在网页设计中扎根。它轻快、快速、轻巧，相对简单、强大。我们总是在谈论前几秒钟如何改变世界。一切都应该从一开始就完美。启动屏幕是web应用程序的一个组件，它与任务的成功直接相关。
大多数人认为英雄区是创造这一宝贵第一印象的幕后推手。然而，也有一些一丝不苟、勤奋的代码艺术家，他们喜欢打点i和跨越t，相信每一秒都很重要。嗯，就是这样。
你越早开始讨好你的在线观众，你的第一印象就会越好。这就是为什么我们在这个舞台上看到各种原始解决方案。事实上，他们打开了网站和观众之间的对话。如果你认为加载器没有能力展示你的创造力，那么闪屏肯定有一些潜力。
利用全屏幕
有了飞溅动画，整个屏幕都可以为您服务，而不仅仅是一个小元素。它们就像电影开场的片段，向观众承诺一些难以置信的事情，从而激发人们的兴趣。
Tedd Arcuri的SmokeT
三js不是创建快速轻量级介绍的好伴侣，但在Tedd Arcuri的例子中，它确实做到了这一点。在这里，巧妙地再现了高度逼真的烟雾效果，以增强字母“T”的外观。字母“T”在这里纯粹是象征性的，因为它可以很容易地更改为标志、吉祥物或标题。
.
Timothy Giblin的主页
大多数闪屏都与品牌标识密切相关。例如，Timothy Giblin的Splash page。这是一个100%经典的闪屏，以艺术家的创造性思维丰富的品牌形象为特色。作者向我们展示了如何坚持中庸。他的理念既新颖又谦逊。它只揭示了一个标识，但这一发现引起了人们的注意。
Hitesh Sahu的闪屏动画
这个例子不如蒂莫西·吉布林的解决方案给人留下深刻印象，但它更实用，而且现在随处可见。本质上，它只是将延迟加载带到下一个级别。它以有趣和创造性的方式一个接一个地展示了主页的元素，使事情变得更加有趣。
还有一些更令人兴奋的代码片段。让我们一起探索该系列，并为您的下一个项目找到最佳匹配。
经典解决方案
想用一种更成熟、更真实的方法来展示你的闪屏吗？下面的例子将帮助您实现这一目标。
Adam Blum的闪屏
Adam Blum解决方案的美丽之处在于传统的滑动效果。它包括一个干净，纯净的背景和几个关键短语，出现一个又一个。它利用了预期的力量：这是一种原始但可行的激发用户兴趣的方法。
Nirajan继续
为了使前面的解决方案更有趣，可以添加具有背景的操作，就像Niranjan在这支笔中所做的那样。他的项目Play On以应用于图像背景的半透明叠加屏幕之间可爱的滑动过渡为特色。很好，很有趣。
威廉姆斯的《我的飞溅》
威廉姆斯的《我的闪屏》是经典闪屏的另一个代表性例子。该概念分为两个阶段。首先，动画以适度而舒适的节奏展示了作者的签名。之后，出现了一个黑屏。这是一个优雅、时尚、商业化的解决方案，适用于众多项目。
Dmytro Lvivsky的动画闪屏
Dmytro Lvivsky的动画闪屏是创建自己的解决方案的完美起点。JavaScript驱动的动画有几个屏幕，每个屏幕之间有一个传统的过渡。后者是基于一个圆圈引导戏剧的效果。
查看CodePen上Dmytro Lvivsky（@UnforbiddenYet）的钢笔动画启动屏幕。
Giles Papworth的简单CSS3褪色
这是一个极其简单的解决方案。常规在于一个接一个地显示文本块，并伴随着历史悠久的褪色效果。然而，它做了它应该做的一切。而且，最重要的是，它不用“吃掉”你的宝贵资源，因为它只使用CSS3。它简单、优雅、适度和轻量级。
情绪设定者
以下示例显示，启动屏幕也可以用于设置网站启动时的基调。
Andrew Tunnecliffe的控制台加载动画
例如，如果你是一个程序员，那么Andrew Tunnecliffe的控制台加载动画将建立一个合适的氛围。它是老派的，极其简单，对于开发人员来说，它与任何个人投资组合都非常匹配。
Thibault Jan Beyer的下降数字
如果你心中有一个基于统计或数据驱动的项目，那么Thibault Jan Beyer的《数字下降》是你讲故事体验的良好开端。动画以不断下降的数字开始，最终击中地面并打开主屏幕。它具有几何学的魅力，并加入了一些数字元素。
最后不能不提
对很多人来说，李永远是“小龙的书呆子哥哥”。对我们来说，他是一个偶像，站在一个善战胜恶的宇宙后面，他将永远在我们心中。
马特·范斯坦的漫威闪屏
马特·范斯坦（MattFeinstein）的漫威（Marvel）闪屏并不是一种致敬，但所有的超级英雄粉丝都会喜欢它。标题不言而喻。他的飞溅动画有一个了不起的漫画氛围。这是漫威电影的开场片段的复制品，看起来不可思议。
如何引起轰动
挡泥板可以作为装载机的替代品——当然，除非它们很重。不幸的是，仍然有人把它们看得太重，试图把它们变成一个动作片。
网页设计中的闪屏是有效的，只要它们快速、短小、轻巧并且直截了当。当然，他们给了你整个屏幕来展示你的天才。不过，你应该坚持它最初的使命。它们应该引起人们的兴趣，并立即将接力棒传递给更令人兴奋的解决方案。
来源：https://speckyboy.com/splash-screen-design/
