4现代背景技巧试用

NATALY桦木 经过 NATALY桦木  |  2016年10月27日

看来,作为一个设计的组成部分,背景生活在阴影中;但是,这并不完全正确。在CSS仅开始对世界征服的第一步进行CSS时,背景已经采取了该网站主要装饰元素的作用。

如今,情况并没有大幅改变。在大多数情况下,它用作主要的视觉驱动力,这对一般主题作出了重要贡献。

传统上,照片和视频是背景的第一个选择。事实是,他们只是过度过度的英雄部分:每个其他网站都以基于图像的或基于电影的背景迎接在线观众。这使得Web(以及您的界面特别)非常相似,导致预期的用户体验。

一种方法是通过利用全新技术并使用CSS3,HTML5和JavaScript进行游戏来找到新的解决方案。实际上,这些选项有一个可辨别的趋势。这些日子,至少有四个不同的现代动态背景,参与竞争赢得阳光的竞争。

让我们看看他们:

 

粒子动画

粒子动画是现在最受欢迎的选择之一。 Load的网站已成功采用了这种优雅的宇宙启发的解决方案。它与普通的纯色画布,插图,矢量图,甚至照片相结合。

此外,动画变化。它可以是一束束缚在整个页面中分散的杂散,以模仿星空或雨的恒星,或者可以用细线连接圆圈的星座主题解决方案。那并非全部;有时它与鼠标悬停事件触发的效果配对:在这种情况下,您可以将粒子驱动,从而形成旋转,将它们附加到游标作为轨道等。

是典型粒子动画的一个例子。它具有一个整洁的圆点,与深色的暗色和地图放在后面的地图上。使用鼠标光标享受一些乐趣。

 葫

小费: 如果您想使用Huub的动态标题背景掌握,那么您应该看看由Dominic Kolbe叫做的项目 鼠标视差演示。它看起来几乎是一样的。但如果您需要立即解决方案,那么Vincent Garreau的JavaScript库被称为 粒子 is what you’re looking for.

 

粒子的波浪

虽然在前面的示例中,可以使用HTML5和CSS3的巧妙操纵和夹具的JavaScript魔法来实现效果,这是一个巧妙的实验,有三个图书馆。凭借其拱形的形式和平滑的纹波运动,它很容易提醒一个小潮。它创造了一种呼吸帆布的感觉。您可以使用鼠标光标在不同方向上旋转它,水平和垂直探索它。

施泰尔 有一个简单的精致的“欢迎”部分。它很小,干净,精致。内容不引人注目地进入视野,而脉动背景为项目建立了正确的情绪。

 施泰尔

小费: 在这里你可以找到 由threejs的原始脚本 并通过Deathfang与演示的成功适应 三。帆布– particles – waves.

 

鼠标悬停视差

分层视差是另一种不断增长的趋势。随着粒子动画,它可以用微妙的3D感觉将一个钝的静态背景转变为组合物。伟大的事情是你不必抛弃你最喜欢的图像选择,只需使用视差来洒它。

当您需要充满标题,标识,超现实的场景或插图时,这是非常有益的。它也适用于各种抽象动画。由标准鼠标悬停事件触发,它不仅增加了另一个维度,而且还允许用户与环境一起玩。

个人组合 亚历山大罗霍斯 有一个出色的飞溅页面。行为不仅捕捉眼睛,还有小鼠悬停视差使字母转移。

 亚历克斯

小费: 有许多图书馆和可行的代码片段,用于生成视差。最受欢迎的之一是Matthew Wagerfield叫做的插件 parallax.js. 。但是,如果您需要在实践中看到它,特别适用于排版,那么您可以通过Frontnerd探索一支笔,其特征在于他 鼠标上的3D视差.

 

WebGL实验

WebGL实验当然是一种用于复杂的硬化开发人员和具有慷慨预算的客户的变种。他们可以辉煌,令人醒悟,有点浮夸。这是每一分钱。然而,软膏总有一只苍蝇。强大的力量带来了巨大的责任,并且WebGL你永远不应该忘记它消耗的资源量,以及缺乏完整的浏览器兼容性。

太阳光 是关于令人难忘和兴密的用户体验。它是一个富含令人兴奋和创新功能的3D WebGL实验。标题背景是一个庞大的未来派领域,可以响应鼠标光标并造成巨大的印象。

 太阳光

小费: 虽然模仿Medimmonks的天才已经做了什么,但在网络上,您可以随时找到一个将为您思考的食物的起点。考虑到这一点 WebGL API. ,来自yoichi Kobayashi的这个代号已经提出一个名为的项目 “蠕动球体”.

 

结论

虽然图像和视频的利用是一种时间经过验证的,但不太痛苦的方式来美化背景,还有其他有希望和实验的选择可以获得所需的结果。远离平庸的挑战性甚至耗金,但这些措施是合理的,非常合理。

无论是一个简单而优雅的粒子动画还是卓越的WebGL实验,它将新的生命注入界面的核心细节,让您的网站开始。