动态背景设计的四种风格

科技
27阅读

在很长一段时间里,网页的背景图片元素,一直生活在CSS、JS甚至视频的阴影中,它的“参与感”并不强。然而随着审美要求和用户需求的逐渐变化,网页装饰中的背景图片,开始扮演越来越重要的角色。

虽然从整体上看变化并不明显,但在绝大多数情况下,背景图像开始成为主要的视觉驱动因素。传统背景主要是用图片来表达,近年来视频背景逐渐成为流行的背景。而且这些主要还是集中在网站页面、Banner等位置上,大多数是为了欢迎用户,推荐内容。很多网站都采用类似的策略,让用户有所期待。

由于有效的流行,现在越来越多的设计师开始尝试将CSS3,HTML5,JS等技术融入到背景设计中,寻找全新的解决方案。实际上,目前已有四种不同类型的动态背景设计方案,它们都非常符合当今时尚的潮流,并且都具备了不俗的发展潜力,今天我们一起聊聊这四种风格的前卫大气。

一、微粒运动效应

微粒动效是最受欢迎的选择之一,很大程度上是因为这个方案对于当前的网站和浏览器来说,负载不大,而且足够优雅。在纯色背景、插画、矢量材料、甚至照片的组合上都能很好的发挥。

此外,颗粒的动效变化也有许多变化。它既可在整个版面内任意分布,也可模拟雨滴和流星的运动轨迹,还可参照星座、星空和宇宙中行星的运动设计。微粒作用作用也可以与鼠标移动和触发事件相结合:允许微粒避开光标,或者微粒绕着该光标移动,甚至移动轨迹跟随光标移动。

该网站是一种典型的案例,不同的点组成了群组,点与点之间有细线连接,在黑色的背景上移动形成旋转效果。随着鼠标的移动,新的点会在光标附近形成,并与最近的光点相连接。

二、波浪颗粒特效

微粒效果可以通过HTML5和CSS3以及JS代码实现,而波纹微粒特异效果则借由Three.js实现。使微粒形成平滑的波纹,并使其产生类似于画布的唿吸作用。您也可以借助鼠标指针将其转到不同的方向,您可以探索各种不同的玩法。

StuurMen该网站利用波纹粒子效果制作一个欢迎页面。其内容以一种无攻击性的方式呈现在用户的视野中,波动微粒特技使整个项目的气氛显得平稳、稳定。

三、滑鼠悬停视差效果。

视觉特技也一直是设计的热点。暗色背景下,配合微粒特效的视差效果几乎可以立刻创造出3D的视觉效果。视差特技的伟大之处在于,你不需要特别精确地选择特定的图像,就可以创造出很好的视差效果。

一种视差特技能使你的标题、LOGO和场景具有真实的质感,它能使你迅速提升。自然,视差特技同样适用于各种抽象动画。当鼠标悬停事件被触发时,相应元素将增加一个维度,用鼠标移动来与其交互。

四、WebGLExperiments。

一系列为进阶设计人员和经验丰富客户准备的功能,使实际节省了设计预算。尽管这些功能会给你带来华丽、夸张甚至不可思议的效果,但是不要忘了,WebGLExperiments带来的强大效果是有代价的:它会消耗大量资源,同时也需要考虑浏览器兼容性。

总结。

从平凡中走出来,意味着你要花更多的时间去思考、探索和实现,不管用什么方法达到特定的效果,达到了就是收获,让你的网站有一个全新的起点。只要你热爱研究,就会有意想不到的收获。

the end
免责声明:本文不代表本站的观点和立场,如有侵权请联系本站删除!本站仅提供信息存储空间服务。