60fpsaccessibleboratcodecustomizefeatherkeyboard-iconlink-rightnotificationpointer-downvelocity
powered by velocity.js
view on github
A simple, Accessible, 60+fps, easy-to-use animated tabs plugin for jQuery.
download latest version
bower bower install tabtab.js --save
or
npm npm install tabtab.js --save-dev
keyboard navigation
60+ fps
easy structure
customizable animations
powerd by velocity.js
lightweight
accessible
It is a very nice

Download

npm install tabtab.js --save-dev
bower install tabtab.js --save
or download latest version manually

Usage

<script src="velocity.min.js"></script>
<script src="tabtab.min.js"></script>


<script>
    $('.tabs').tabtab();
</script>

Requirements

jQuery >1.8
Velocity.js (download)

Options

$('.tabs').tabtab({
    tabMenu: '.tabs__menu',             // direct container of the tab menu items
    tabContent: '.tabs__content',       // direct container of the tab content items
    next: '.tabs-controls__next',       // next slide trigger
    prev: '.tabs-controls__prev',       // previous slide trigger

    startSlide: 1,                      // starting slide on pageload
    arrows: true,                       // keyboard arrow navigation
    dynamicHeight: true,                // if true the height will dynamic and animated.
    useAnimations: true,                // disables animations.

    easing: 'ease',                     // http://julian.com/research/velocity/#easing
    speed: 350,                         // animation speed
    slideDelay: 0,                      // delay the animation
    perspective: 1200,                  // set 3D perspective
    transformOrigin: 'center top',      // set the center point of the 3d animation
    perspectiveOrigin: '50% 50%',       // camera angle

    translateY: 0,                      // animate along the Y axis (val: px or ‘slide’)
    translateX: 0,                      // animate along the X axis (val: px or ‘slide’)
    scale: 1,                           // animate scale (val: 0-2)
    rotateX: 90,                        // animate rotation (val: 0deg-360deg)
    rotateY: 0,                         // animate Y acces rotation (val: 0deg-360deg)
    skewY: 0,                           // animate Y skew (val: 0deg-360deg)
    skewX: 0,                           // animate X skew (val: 0deg-360deg)
});
FAQ & Examples

Is this plugin ready for production use?

The plugin including the velocity.js library weighs 12kb when gzipped. If you use it without velocity.js it weighs 1-2kb.

What is the browser support?

It supports IE8+ and all other modern browsers.

Can i create a tabtab within a tabtab

Yes, but i have no clue why you would want to do that.

Do i need to include a stylesheet?

No only tabtab.js and optionally velocity.js for animations. We do recommend to take a look at the included stylesheet to prevent FOUC.

When should I use this plugin?

If you care about rendering performance and beautifull animations. You should check this plugin out.

Can i use this in a commercial project?

This project is registered under the MIT license. So yes you can use it in a commercial project as long as you give credit.

Can i prevent possible FOUC?

Yes. you should manually add an active class to your starting slide. You should also take a look at the included stylesheet in the zip file.