Menu

8奇妙的上机旋转木马HTML和CSS片段

<返回列表

几年前,上机动画掀起了网络风暴。它们在设计师中越来越受欢迎。Dribbble社区充满了不同的解决方案。它以一个简单的演示开始,使用静态的插图,这吸引了一种巧妙的方法和艺术性质的共生。最后,我们得到了一些动画片,展示了未来移动应用的美妙之处。

当然,就像往常一样,时间流逝,围绕它的嗡嗡声逐渐消失。然而,像所有的强劲趋势一样,这些入职项目已经从奢侈的东西转变为必须具备的特性。

每一个想要创造一个专业产品的人,以及关心他们的观众的人,都会入职我是认真的。从长远来看,它在弥合用户和应用程序之间的差距方面发挥着至关重要的作用。它是每一个良好的用户体验的基础。所以它不能被忽视。

对于那些意识到这一重要技术并想充分利用隐藏在里面的力量的人,我们已经准备了一组入职代码片段。它们将帮助您开始构建更好的用户体验。

入职法比奥·奥塔维亚尼 

法比奥·奥塔维亚尼创造了一种令人赏心悦目的解决方案,设计整洁干净,图形美观,动感可爱。它是基于一个传统的水平滑块,提供三个小点的导航。它有三个屏幕,但欢迎您增加这个数目。用它来让上船不显眼。

使用jQuery的上机幻灯片作者:Hainer Savimaa 

虽然前面的示例采用了一种更传统的入职方式,但HainerSavimaa的这个项目结合了一些现代特性。这个分裂布局在这里的规则,提供精心组织的空间,以显示信息。

当您有机会将视觉内容从文本中分离出来时,这是很方便的。而且,有了这些,看上去不仅是好的,而且是时髦的。作者还为每一节提供了只会强化整体印象的过渡效果。请注意,除了经典的基于点的导航,还有支持“Next”和“back”按钮的那些不喜欢小控件的人。

入职Nahom Ebssa著 

Nahom Ebssa项目的关键特点在于它对空间的保守使用。艺术家成功地在一个屏幕中容纳了所有必要的信息,并且仍然提供了一个舒适的用户体验。至于导航,它有点未完成,因为没有后退按钮,导航点只是装饰而已。但是,总的来说,这个代码片段可以作为实验的坚实基础。

入职菲尔肖·珀尔斯 

灵感来自杰出的上机屏幕恩尼奥·戴贝利,这个解决方案将使你满意它的最小的外观和可爱的行为。不过,这并没有什么特别之处。所有的细节都是标准的,过渡是基本的,但它们完美地一起工作。这个概念很简单,但却是直截了当的.它是小规模项目的理想选择。

上船旋转木马达里奥·科西(Dario Corsi) 

我们已经在我们的收藏中看到了分裂的屏幕。这一次,它被旋转了90度,并转变成一个传统的条纹布局-看起来很像一个基本滑块从过去。但毫无疑问,它有可能覆盖所有你想要提供给用户的上机信息。

它有两种类型的导航。首先,一个相对较大的上半部分,对于视觉材料给予了巨大的关注。然后有一个干净的区域,可以随同文字。还有一些很棒的动画你可以适应你的需要。

尽管它有一个相对广泛的结构适合平板而不是手机,你可以很快接受这个想法,并提出一个响应的版本。

入职尼克·瓦宁格 

尼克·万宁格(NickWanninger)的登机牌并不是那种以美丽的美学或非凡的动画赢得用户的东西。相反,它是实验的基础。它没有花哨的设计--只是一个经典的结构。有两个方面。第一个是为内容分配的,而第二个是包含导航的。

与前面提到的片段不同,这个组件附带了短行,而不是点和标准箭头,而不是单词“Next”和“back”,从而产生了直观的界面。就像达里奥·科西的代码片段一样,它扮演着一个完美的基础的角色,这个基础已经准备好了。

移动式旋转木马埃琳娜 

由天才艺术家埃琳娜创作,这是一个精确的复制品抛射罗兰·维克多的。不过,除了一个小的例外:埃琳娜的项目有一个动画的对应,带来了一个了不起的整体印象。

利用野生猫头鹰最受欢迎、时间证明和直观的旋转木马之一--猫头鹰--这位艺术家成功地实现了这个概念。要想破解这个想法,并根据你的需要调整它,这不需要太大的努力。

Android应用程序上机马特·斯文森(Mat Swainson) 

Mat Swainson的这个项目是为那些寻找一些老生常谈的人设计的.它看起来有点过时,但它的工作做得很好。

更重要的是,它有一个独特的特性,它与我们的总结中的其他特性不同:这里的入职板有两个部分。第一个屏幕显示了四个标准屏幕,可以用来教育游客。第二个包括一个登录表格对于那些不需要任何澄清,并希望直接进入业务,按下“跳”按钮。

液体刷开源库贝托 

我们已经研究了一些解决方案,这些解决方案提供了一种基本的技术,用于连续显示一系列屏幕截图或动画。由Cuberto开放源码的液体刷有点不同。

它的中心是一个突出的过渡效应,完美地模仿液体的滑动行为。这是如此自然的感觉,这将是相当困难的把你的手从应用程序。它可以在GitHub回购并且需要iOS和Xcode。

Liquid Swipe Open Source by Cuberto

改善用户体验,简单地

本质上,上机可以根据一个典型的旋转木马实现,这是相当直观的使用。您所需要做的就是将每个幻灯片分成两个部分:一个用于内容,另一个用于导航。

在此之后,您可以通过设计特性、动画和过渡效果来丰富它,使用户体验不仅是信息丰富的,而且也是令人愉快的。


最新网站设计资讯
企业网站建设

企业网站建设优化一条龙,多年品牌网站设计,营销网站开发,手机网站制作,响应式网站设计

联系我们

电话:18868949445QQ:1611387063 邮箱:[email protected]

联系云轩总监微信

微信