UI设计转换成html,CSS3全屏双面板内容切换UI设计

这是一款效果非常炫酷的全屏双面板内容切换UI设计效果。该UI设计使用CSS3和jQuery来制作双面板效果，左右两个面板可以通过箭头按钮来相应切换具体的内容，在内容切换时带有一些3D效果，非常炫酷。

使用方法

HTML结构

该全屏双面板的HTML结构的要点是：外部包裹容器的宽度是视口(viewport)的2倍，在它里面有两个

元素，每一个都等于100%的viewport宽度。这两个

元素在它们的父容器中浮动，一个紧挨另一个。但是这时外部的父容器会产生水平的滚动条，为了修复这个问题，可以在外部包裹容器之外在添加一个总的包裹容器，并通过CSS来设置溢出隐藏。

这样，我们只可以看到左边的

元素，而右边的

元素是被隐藏的。为了使两个

元素各自都只显示一半，可以使它们向左移动-25%(外部容器宽度的25%)。现在，如果想看到左边div的全部内容，只需要向右移动，设置为50%，想看到右边的div全部内容，只需要做相反的操作即可。

"..."

Noam Chomsky

Buzz Aldrin

"..."

CSS样式

为了使每个

元素都填充满整个视口，CSS中设置它们的高度为100vh。

.overflow {

height: 100vh;

overflow: hidden;

}

.panels__side--inner-left,

.panels__side--inner-right,

.panels__side--inner {

padding: 0 5vw;

height: 100vh;

}

另外特效中还预设了一些切换class类，这些类在JavaScript代码中使用，用以切换面板的各种状态。还有一个active类和一个隐藏class类，它们都是为左右两个div服务的。这些class决定div的哪个部分被显示，哪个部分会被移动到屏幕上显示。

JavaScript

特效中使用jQuery代码来切换两个div，如果左边的div被点击，那么会给它添加一个active的class，而右边的div则添加隐藏的class样式。

$(function() {

var Panels = (function() {

var panelLeft = document.querySelector('.panels__side--left');

var panelRight = document.querySelector('.panels__side--right');

var openLeft = function() {

panelLeft.classList.toggle('panels__side--left-active');

panelRight.classList.toggle('panels__side--right-hidden');

};

var openRight = function() {

panelRight.classList.toggle('panels__side--right-active');

panelLeft.classList.toggle('panels__side--left-hidden');

};

var bindActions = function() {

panelLeft.addEventListener('click', openLeft, false);

panelRight.addEventListener('click', openRight, false);

};

var init = function() {

bindActions();

};

return {

init: init

};

}());

Panels.init();

});