<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <section id="wrapper"> <nav class="nav"> <ul class="clearfix"> <li class="active">DEMO 1<span>Fast and Furious</span> </li> <li>DEMO 2<span>From the sides</span> </li> <li>DEMO 3<span>Nice and slow</span> </li> <li>DEMO 4<span>Demo 1 inverted</span> </li> </ul> </nav> <!--DEMO--> <section class="widget demo1 clearfix showdemo"> <div class="btns"> <span class="fa fa-coffee"></span> <h3>Coffee</h3> <p>Brazil is the world's biggest producer of coffee</p> </div> <div class="btns"> <span class="fa fa-gamepad"></span> <h3>Video Games</h3> <p>49% of U.S. households own a dedicated game console</p> </div> <div class="btns"> <span class="fa fa-headphones"></span> <h3>Headphones</h3> <p>Headphones were purposely designed to self-tangle.</p> </div> <div class="btns"> <span class="fa fa-globe"></span> <h3>Planet Earth</h3> <p>The Earth, seen from the moon, also goes through phases.</p> </div> </section> <!--DEMO--> </section> <script> /******************* ANIMATION BUTTONS *******************/ $(".btns").hover(function () { $(this).delay(10).queue(function(){ $(this).addClass('active').clearQueue(); }); }, function () { $(this).removeClass('active'); }); $('.nav li').click(function(){ $('.nav li').removeClass('active'); $(this).addClass('active'); var i = $(this).index(); var classNumber = i+1; $('.widget').removeClass('demo1 demo2 demo3 demo4 wobble').addClass('demo'+classNumber); $('.widget').delay(10).queue(function(){ $(this).addClass('wobble').clearQueue(); }); }); </script>

* { margin: 0; padding: 0; } /*CLEARFIX*/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; width: 100%; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /*GLOBALS*/ a { text-decoration: none; color: #eaeaea; } body, hmtl { background: #eaeaea; } .r { float: right; } .l { float: left; } /*PLAYER*/ #wrapper { width: 750px; margin: 100px auto; position: relative; } /*NAVIGATION*/ .nav ul { width: 100%; list-style: none; font-family: 'Open Sans Condensed', sans-serif; background: #333; color: #fff; } .nav ul li { width: 25%; float: left; padding: 10px 0; text-align: center; cursor: pointer; } .nav ul li span { display: block; font-size: 14px; color: #999; } .nav ul li:hover { background: #444; } .nav ul li.active { background: #ffbe12; color: #333; font-weight: 700; } .nav ul li.active span { color: #333; font-weight: normal; } .widget { width: 100%; margin-top: 20px; padding: 15px; background: #fff; box-shadow: #dfdfdf 0px 4px 0px; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; -moz-transform: translateY(50px); -webkit-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .widget.showdemo { opacity: 1; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /*BUTTONS*/ .btns { padding: 15px; float: left; width: 25%; min-height: 30px; border-left: 1px solid #eaeaea; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; color: #333; height: 100%; overflow: hidden; } .btns:first-child { border-left: none; } .btns span.fa { font-size: 60px; display: block; margin: 0 auto; width: 100%; } .btns h3 { font-family: 'Amatic SC', cursive; font-size: 30px; margin: 20px 0 8px; color: #337ec8; } .btns p { font-family: 'Open Sans Condensed', sans-serif; font-size: 18px; line-height: 1.3; } /*ANIMATION*/ .btns:hover { background: #333; color: #fff; cursor: pointer; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; } .btns:hover h3 { color: #ffbe12; } /*DEMO 1*/ .demo1 .btns:hover span, .demo1 .btns:hover h3, .demo1 .btns:hover p { -moz-transform: translateY(-250px); -webkit-transform: translateY(-250px); -o-transform: translateY(-250px); -ms-transform: translateY(-250px); transform: translateY(-250px); } .demo1 .btns.active span, .demo1 .btns.active h3, .demo1 .btns.active p { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .demo1 .btns.active span { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; } .demo1 .btns.active h3 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; } /*DEMO 2*/ .demo2 .btns:hover span, .demo2 .btns:hover p { -moz-transform: translateX(-200px); -webkit-transform: translateX(-200px); -o-transform: translateX(-200px); -ms-transform: translateX(-200px); transform: translateX(-200px); } .demo2 .btns:hover h3 { -moz-transform: translateX(200px); -webkit-transform: translateX(200px); -o-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); } .demo2 .btns.active span, .demo2 .btns.active h3, .demo2 .btns.active p { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .demo2 .btns.active span { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; } .demo2 .btns.active h3 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; } /*DEMO 3*/ .demo3 .btns:hover span, .demo3 .btns:hover h3 { -moz-transform: translateY(-20px); -webkit-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); opacity: 0; } .demo3 .btns:hover p { -moz-transform: translateY(20px); -webkit-transform: translateY(20px); -o-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } .demo3 .btns.active span, .demo3 .btns.active h3, .demo3 .btns.active p { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .demo3 .btns.active span { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; } .demo3 .btns.active h3 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; } /*DEMO 4*/ .demo4 .btns:hover span, .demo4 .btns:hover h3, .demo4 .btns:hover p { -moz-transform: translateY(250px); -webkit-transform: translateY(250px); -o-transform: translateY(250px); -ms-transform: translateY-250px); transform: translateY(250px); } .demo4 .btns.active span, .demo4 .btns.active h3, .demo4 .btns.active p { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .demo4 .btns.active p { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; } .demo4 .btns.active h3 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @-moz-keyframes wobble { 0% { -moz-transform: none; transform: none; } 15% { -moz-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -moz-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -moz-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -moz-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -moz-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -moz-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; -moz-animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -o-animation-duration: 0.4s; }