网页设计4种现代背景技巧试用

网站建设 2016 10月28日 发布

看来,作为设计的一个组成部分,背景生活在阴影中;然而,这不是完全正确的。在CSS只是开始迈向世界征服的第一步,时代的背景已经承担了网站的主要装饰元素的作用。

现在情况没有大的变化。在大多数情况下,它作为主要的视觉驱动力,对一般主题作出重要贡献。

传统上,照片和视频是背景的首选。事实是,他们只是人满为患的英雄部分:每个其他网站通过基于图像或电影的背景,向在线观众打招呼。这使得Web(尤其是您的界面)非常相似,从而产生预期的用户体验。

一种方法是通过利用全新的技术和使用CSS3,HTML5和JavaScript来找到新的解决方案。事实上,这些选择有一个明显的趋势。有至少四个不同的现代动态背景,参加竞争,赢得它的位置在阳光下这些天。

让我们看看他们:

 

粒子动画

粒子动画是目前最流行的选择之一。网站的负载已经成功地采纳了这个优雅的宇宙启发的解决方案。它可以很好地结合纯色彩画布,插图,矢量图纸,甚至照片。

此外,动画变化。它可以是一个混乱的移动点,散布在整个页面,以模仿星空的恒星或雨,或星座主题的解决方案,你可以连接细线的圆。这不是全部;有时它与鼠标悬停事件触发的效果配对:在这种情况下,您可以驱动粒子离开,从它们形成漩涡,将它们作为轨迹附加到光标等。

Huub是典型粒子动画的一个例子。它的特点是一个整洁的移动的点群完美地与一个黑色的着色和地图放在背部。使用鼠标光标有一些乐趣。



提示:如果你想要掌握Huub的动态标题背景,那么你应该看看由Dominic Kolbe创建的项目叫做鼠标视差演示。它看起来几乎一样。但是如果你需要一个立即解决方案,那么JavaScript库由Vincent Garreau称为Particles.js是你正在寻找。

 

颗粒的波纹

而在前面的例子中,效果可以通过使用HTML5和CSS3以及一小段JavaScript魔法的巧妙操作来实现,这是一个使用Three.js库的巧妙实验。它的拱形形式和平滑的波纹状运动,它很容易提醒一个小潮流。它创造了一种呼吸画布的感觉。您可以使用鼠标光标在不同的方向旋转它,水平和垂直探索它。

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



提示:在这里,您可以找到ThreeJS的原始脚本,并通过Deathfang成功改编为一个名为three.js画布 - 粒子波的演示。

 

鼠标盖

分层视差是另一种增长趋势。与粒子动画一起,它可以将一个暗淡的静态背景转换为具有微妙的3D感觉的作品。伟大的事情是,你不必挖掘你最喜欢的图像选择,只是使用视差云杉一点。

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

Alexandre Rochet的个人投资组合有一个出色的初始页面。不仅行为捕捉眼睛,而且鼠标悬停视差使字母移位。



提示:有许多库和可行的代码片段用于生成视差。最受欢迎的一个是由Matthew Wagerfield创建的一个插件,名为Parallax.js。然而,如果你需要看到它在实践中,特别是应用于排版,那么你可以探索一个钢笔由Frontnerd,他的三维视差的鼠标。


 


WEBGL实验

WebGL实验,当然,是一个变化的复杂硬化的开发人员和客户有丰富的预算。他们可以是辉煌,令人鼓舞的,有点夸张。这是值得每一分钱。然而,在软膏中总有一只苍蝇。拥有强大的权力带来了巨大的责任,使用WebGL,你不应该忘记它消耗的资源量,以及缺乏完全的浏览器兼容性。

Solarin是一个令人难忘和令人兴奋的用户体验。它是一个3D WebGL实验,丰富的许多令人兴奋和创新的功能。标题背景是一个巨大的未来派球体,响应鼠标光标,并创造了巨大的印象。

提示:虽然模仿MediaMonks中的天才是如此复杂,但在网络上,你总是可以找到一个起点,让你思考。考虑WebGL API,这个来自小林友一的代码,他提出了一个名为“扭动球”的项目。

 

结论

虽然使用图像和视频是时间证明和较不痛苦的方式来美化背景,但还有其他有希望和实验的选项,可以获得所需的结果。远离平庸是有挑战性的,甚至是耗费的,但这些措施是有道理和相当合理的。

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


如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.com/news/207.html