JSFiddle - React, Tailwind, and code Playground
by Jordan Sayner
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="te-container">
<div id="te-wrapper" class="te-wrapper">
<div class="te-images">
<div class="te-images-item"><img src="http://placehold.it/650x50?text=Banner+1" /></div>
<div class="te-images-item"><img src="http://placehold.it/650x50?text=Banner+2" /></div>
<div class="te-images-item"><img src="http://placehold.it/650x50?text=Banner+3" /></div>
<div class="te-images-item"><img src="http://placehold.it/650x50?text=Banner+4" /></div>
</div>
<div class="te-cover">
<img src="http://placehold.it/650x50?text=Banner+1"/>
</div>
<div class="te-transition">
<div class="te-cube-front te-cube-face te-front"></div>
<div class="te-cube-top te-cube-face te-back"></div>
<div class="te-cube-bottom te-cube-face te-back"></div>
<div class="te-cube-right te-cube-face te-back"></div>
<div class="te-cube-left te-cube-face te-back"></div>
</div>
</div>
</div>
CSS
/* Some common styles for the transition effect */
.te-container{
width: 650px;
margin: 80px auto;
}
.te-wrapper{
position: relative;
width: 650px;
height: 50px;
}
/*******************************************************/
/****************** Cube Effects ***********************/
/*******************************************************/
.te-perspective{
-webkit-perspective: 1000px;
-mox-perspective: 1000px;
-p-perspective: 1000px;
perspective: 1000px;
-ms-perspective: 1000px;
}
.te-cover,
.te-transition{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-ms-transform-style: none;
position: absolute;
width: 650px;
height: 50px;
top: 0px;
left: 0px;
}
.te-cover.te-hide,
.te-transition,
.te-images{ display: none; }
.te-transition.te-show{ display: block; }
.te-cube-face{
position: absolute;
width: 650px;
height: 50px;
display: block;
overflow: hidden;
}
.te-back,
.te-front{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.te-front{ z-index: 2; }
.te-back{ z-index: 1; }
/***************** Cube1 ********************/
.te-cube1 .te-cube-front{
-webkit-transform: scale3d(.975,.975,.975) translate3d(0,0,25px);
-moz-transform: scale3d(.975,.975,.975) translate3d(0,0,25px);
-o-transform: scale3d(.975,.975,.975) translate3d(0,0,25px);
transform: scale3d(.975,.975,.975) translate3d(0,0,25px);
-ms-transform: scale3d(.975,.975,.975) translate3d(0,0,25px);
}
.te-cube1 .te-cube-top{
-webkit-transform: scale3d(.975,.975,.975) rotate3d(1,0,0,90deg) translate3d(0,0,25px);
-moz-transform: scale3d(.975,.975,.975) rotate3d(1,0,0,90deg) translate3d(0,0,25px);
-o-transform: scale3d(.975,.975,.975) rotate3d(1,0,0,90deg) translate3d(0,0,25px);
transform: scale3d(.975,.975,.975)...
JavaScript
$(function() {
var TransitionEffects = (function() {
var $teWrapper = $('#te-wrapper'),
$teCover = $teWrapper.find('div.te-cover'),
$teImages = $teWrapper.find('div.te-images > .te-images-item'),
imagesCount = $teImages.length,
currentImg = 0,
$navNext = $('#te-next'),
$type = 'te-cube1',
type = $type,
$teTransition = $teWrapper.find('.te-transition'),
// requires perspective
wPerspective = [ 'te-cube1'],
animated = false,
// check for support
hasPerspective = Modernizr.csstransforms3d,
init = function() {
$teTransition.addClass( type );
setInterval(function () {
if( hasPerspective && animated )
return false;
animated = true;
showNext();
return false;
}, 2000);
if( hasPerspective ) {
$teWrapper.on({
'animationEnd webkitAnimationEnd oAnimationEnd': function (event) {
$teCover.removeClass('te-hide');
if( $.inArray( type, wPerspective ) !== -1 )
$teWrapper.removeClass('te-perspective');
$teTransition.removeClass('te-show');
animated = false;
}
});
}
},
showNext = function() {
if( hasPerspective ) {
if( $.inArray( type, wPerspective ) !== -1 ) {
$teWrapper.addClass('te-perspective');
}
$teTransition.addClass('te-show');
$teCover.addClass('te-hide');
}
updateImages();
},
updateImages = function() {
var $back = $teTransition.find('div.te-back'),
$front = $teTransition.find('div.te-front');
( currentImg === imagesCount - 1 ) ?
( last_img = imagesCount - 1, currentImg = 0 ) :
( last_img = currentImg, ++currentImg );
var $last_img = $teImages.eq( last_img ),
$currentImg = $teImages.eq( currentImg );
$front.empty().append('<img src="' + $last_img.find('img').attr('src') +...