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

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