当前位置：首页 > 网页特效 > 其他

CSS3全屏双面板内容切换UI设计

分类：其他日期：2024-05-14 点击(0) 评论(0)

CSS3全屏双面板内容切换UI设计

简介

##### HTML结构
该全屏双面板的HTML结构的要点是：外部包裹容器的宽度是视口（viewport）的2倍，在它里面有两个div元素，每一个都等于100%的viewport宽度。这两个div元素在它们的父容器中浮动，一个紧挨另一个。但是这时外部的父容器会产生水平的滚动条，为了修复这个问题，可以在外部包裹容器之外在添加一个总的包裹容器，并通过CSS来设置溢出隐藏。

这样，我们只可以看到左边的div元素，而右边的div元素是被隐藏的。为了使两个div元素各自都只显示一半，可以使它们向左移动-25%（外部容器宽度的25%）。现在，如果想看到左边div的全部内容，只需要向右移动，设置为50%，想看到右边的div全部内容，只需要做相反的操作即可。

```html
<div class="overflow">
    <section class="panels">
      <article class="panels__side panels__side--left">
        <div class="panels__side panels__side--inner-left">
          <p>"..."</p>
        </div>
        <div class="panels__side panels__side--inner">
          <h1 class="panels__headline">Noam Chomsky</h1>   
          <svg class="arrow arrow--left" width="40" height="40" viewBox="0 0 24 24">
            <path d="M0 0h24v24h-24z" fill="none"></path>
            <path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z"></path>
          </svg>
        </div>
      </article>
      <article class="panels__side panels__side--right">
        <div class="panels__side panels__side--inner">
          <h1 class="panels__headline">Buzz Aldrin</h1>
          <svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24">
            <path d="M0 0h24v24h-24z" fill="none"></path>
            <path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z"></path>
          </svg>
        </div>
        <div class="panels__side panels__side--inner-right">
          <p>"..."</p>
        </div>
      </article>
    </section>
  </div>    
```            
#####  CSS样式
为了使每个div元素都填充满整个视口，CSS中设置它们的高度为100vh。

```html
.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 JavaScript
特效中使用jQuery代码来切换两个div，如果左边的div被点击，那么会给它添加一个active的class，而右边的div则添加隐藏的class样式。

```html
$(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();
});     
```

web299.com

CSS3全屏双面板内容切换UI设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果