上篇文章10个独特的CSS背景视觉效果中有提到分屏的视觉效果,今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。
HTML结构
先把基础结构样式弄好,要实现这个效果,需要使用div来构建两个panel。第一个赋予bottom类,另外一个为top类。然后使用一个类名为splitview来包裹起来。
复制代码
内容区域即content可以放任何东西,图片文字等等。
然后在splitview结构外面,再添加一个div类名为handle,用来加强表示分屏的视觉效果。
复制代码
样式
首先来写两个panel的样式,要实现这个效果需要用到绝对定位,所以要确保类名为top的panel在另外一个panel的上面。还有一点是为了可以自适应设备屏幕的大小,这里使用vw这个单位。
/* Panels. */
.splitview {
position: relative;
width: 100%;
min-height: 45vw;
overflow: hidden;
}
.panel {
position: absolute;
width: 100vw;
min-height: 45v