Based on the HTML5 Tab, the animation switches the effect,

Based on the HTML5 Tab, the animation switches the effect,

You can change the animation effect based on the HTML5 Tab. This is a Tab plug-in cbpFWTabs with animation Switching Effect Based on HTML5 + CSS3. As follows:

Download Online Preview source code

Implementation code.

Html code:

<section>    <div class="tabs tabs-style-circlefill">        <nav>            <ul>                <li><a href="#section-circlefill-1" class="icon icon-plug"><span>Connect</span></a></li>                <li><a href="#section-circlefill-2" class="icon icon-gift"><span>Gifts</span></a></li>                <li><a href="#section-circlefill-3" class="icon icon-box"><span>Boxes</span></a></li>                <li><a href="#section-circlefill-4" class="icon icon-date"><span>Prints</span></a></li>                <li><a href="#section-circlefill-5" class="icon icon-plane"><span>Fun</span></a></li>            </ul>        </nav>        <div class="content-wrap">            <section id="section-circlefill-1"><p>1</p></section>            <section id="section-circlefill-2"><p>2</p></section>            <section id="section-circlefill-3"><p>3</p></section>            <section id="section-circlefill-4"><p>4</p></section>            <section id="section-circlefill-5"><p>5</p></section>        </div><!-- /content -->    </div><!-- /tabs --></section><script src="js/cbpFWTabs.js"></script><script>    (function() {        [].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {            new CBPFWTabs( el );        });    })();</script>

Via: http://www.w2bc.com/article/53516