jQuery

【jQuery】シンプルで使いやすいアニメーションタブTabTab.js

July 13, 2015

TabTab.jsはシンプルで使いやすいアニメーションタブです。
ライセンスはMITでブラウザはIE8以降、すべての最新ブラウザをサポートしているそうです。

JS

jQuery本体は1.8以上を使用。
Velocity.jsも必要になってきます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="velocity.min.js"></script>
<script src="tabtab.min.js"></script>

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

オプション

$('.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',                     
    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)
});

Demo/Download