10 个能启发你设计灵感的分屏视觉效果

2,518 阅读3分钟
原文链接: svgtrick.com

分屏视觉效果,现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website

下面就列举10个应用分屏的视觉效果,可以根据自己的需要来修改源代码应用到自己的产品中。

使用分屏来让用户做出选择

这是分屏比较常用的一个场景,通常被用于给用户来选择不同的产品。比如下面的这个实例,就是使用不同的背景图片把两个产品分隔开来,以供用户选择。

代码地址

分屏轮播视觉效果

使用分屏还可以实现更加有趣的轮播图效果。比如下面这个实例,当用户滚动鼠标的时候,每张轮播图被分成两边,分别从上下不同的方向进入并合成一张图。从而实现了一个具有非常特别视觉效果的轮播图。

代码地址

分屏内容展示效果

随着4K等尺寸越来越大,分辨率越来越高的屏幕设备的流行,越来越多的设计师也越来越多利用设备的优势来进行视觉上的变革。比如,下面这个例子就利用分屏来布局分别展示内容,并且在小屏幕设备上把左边图片放在文章内容的上面,在视觉上也呈现了非常好的视觉效果。

代码地址

分屏图片对比展示

分屏还有一个经典的应用就是一张图片在不同场景下的对比。具体就是让用户使用鼠标在图片上移动展示一张图片在不同情形下的对比,比如压缩前和压缩后,一般要使用JavaScript来实现这种对比视觉效果。

代码地址

分屏图片内容滑动效果

下面这个效果比较有创意,主要是采用分屏来实现滚动的时候异步展示内容的视觉效果。仅仅需要150行CSS代码就可以实现这个效果。

代码地址

分屏实现杂志布局视觉效果

下面这个效果使用分屏来模拟实现现实中杂志布局的效果。内容简介在左边,详细的内容则在右边。

代码地址

分屏展示品牌服务

这个应用场景特别是针对那些提供B2B服务产品的网站来更好的展示自己的产品和解决方案用的,比如,现在很多提供云服务的厂商。主要是把提供的产品或者解决方案分左右两屏来展示,下面这个例子在左边展示服务的名称,右边则展示详细的内容。

代码地址

分屏图片展示效果

这个效果用来展示图片用的,具体如下图所示:

代码地址

分屏3D旋转特效

这个效果使用CSS 3D和分屏来实现一个3D旋转的特效。

代码地址

分屏幕布展开视觉效果

这个例子展示的使用上下分屏,当用滑动鼠标或者是往下滚动的时候,上下两屏分别从左右两边像幕布一样展开的视觉效果。

代码地址

总结

希望上面展示的分屏应用能给你一些设计上的灵感和启发,如果能实际用到项目中,那就最好不过了。

本文主要是从10 Snippets for Creating Split Screen Layouts这篇文章整理而来,有删减,有疏漏或者理解不到位的地方,还请多多指教!