当前位置：首页 > 网页特效 > 选项卡

支持键盘控制的扁平风格水平滑动Tab选项卡

分类：选项卡日期：2024-05-14 点击(4) 评论(0)

简介

#####  HTML结构
选项卡由一个nav元素组成，它的里面是一个无序列表。div.burger是一个关闭按钮，可以隐藏和显示选项卡。

```html
<nav class="nav nav--active">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color1" data-letter="a"></div>
        <p class="nav__label">About</p>
      </a>
    </li>
    ......
  </ul>
  <div class="burger burger--close">
    <div class="burger__patty"></div>
  </div>
</nav>     
```          
每一个section class="section"都使用绝对定位使它们堆叠在一起。隐藏的section会被使用translate:100%;移动到屏幕之外，在相应选项卡被点击的时候才被移动会原来的位置。当一个新的选项卡被移动到屏幕中，原来的选项卡被使用translate:-100%;移动到屏幕屏幕左边。当过渡动画完成之后，移动到屏幕左边的section会被重置回屏幕的右边，这样可以保证在下一次移动时处于正确的位置。

```html
<div class="page">
  <section class="section color2" data-letter="p">
    <article class="section__wrapper">
      <h1 class="section__title">...</h1>
      <p>...</p>
    </article>
  </section>
  ...
</div>      
```          
#####  CSS样式 
nav元素使用position: fixed将其固定在屏幕的上方。每一个section都使用position: absolute使它们堆叠在一起，然后使用transform: translateX(100%) 将它们移动并隐藏。

```html
.nav {
  will-change: transform;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  background: #1a1a1a;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav--active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.section {
  will-change: transform;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  background: #fff;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.section--hidden {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}
.section--active {
  -webkit-transform: translateX(0) rotateY(0);
          transform: translateX(0) rotateY(0);
  z-index: 2;
}       
```         
#####  JAVASCRIPT
这个TAB选项卡的jQuery代码中主要使用.eq()和.index()方法来在点击Tab的时候隐藏和显示正确的选项卡内容。当用户点击某个Tab时，代码中保存列表项的索引序号，然后使用这个值来选择正确的section。然后在原来的选项卡上添加class来隐藏它，并在当前激活的选项卡上添加class来将它移动会屏幕中。

当过渡动画完成之后（使用transitionend事件），代码中重置隐藏section的位置，使它们在下一次动画之前处于正确的位置之上。

web299.com

支持键盘控制的扁平风格水平滑动Tab选项卡

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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