Awesome 3D Carousel Using jQuery & TweenMax.js

In this tutorial I am going to share Awesome 3D Carousel script which made using jQuery and TweenMax.js. It’ll create 3d looking image slider and with auto rotate feature which gives cool look to your web page.

Awesome 3D Carousel Using jQuery, TweenMax.js

HTML

<header>
 
 
<h1>3D Carousel Using TweenMax.js &amp; jQuery</h1>
 
 
 
 
<div id="fps">Framerate: 0/60 FPS</div>
 
 
    </header>
 
 
<div id="contentContainer" class="trans3d"> 
    <section id="carouselContainer" class="trans3d">
 
 
<figure id="item1" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">1</div></figure>
 
 
 
 
<figure id="item2" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">2</div></figure>
 
 
 
 
<figure id="item3" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">3</div></figure>
 
 
 
 
<figure id="item4" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">4</div></figure>
 
 
 
 
<figure id="item5" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">5</div></figure>
 
 
 
 
<figure id="item6" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">6</div></figure>
 
 
 
 
<figure id="item7" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">7</div></figure>
 
 
 
 
<figure id="item8" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">8</div></figure>
 
 
 
 
<figure id="item9" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">9</div></figure>
 
 
 
 
<figure id="item10" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">10</div></figure>
 
 
 
 
<figure id="item11" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">11</div></figure>
 
 
 
 
<figure id="item12" class="carouselItem trans3d">
 
 
<div class="carouselItemInner trans3d">12</div></figure>
 
 
    </section>
</div>




CSS

html, body{ background-color:#1a948d; } 
 
body
{ 
    background-image: url('../images/background.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    width:100%;
    background-size:cover;
    height:100%;
    min-height:1000px;
    overflow:hidden;
    font-family: 'quicksandlight', Helvetica, Arial;
    color:#FFFFFF;
    text-shadow: -1px -1px 4px rgba(0, 0, 0, .35);
    filter: dropshadow(color=#000000, offx=1, offy=1);
}
 
header
{
 
    margin-top:30px;
    position:absolute;
    z-index:5;
    width:420px;
    padding-top:10px;
    padding-bottom:10px;
 
}
 
h1{
 
    font-size:36px;
    letter-spacing:-2.5px;
    margin-left:30px;
}
 
h3{
 
    font-size:16px;
    letter-spacing:-1.5px;
    margin-top:5px;
    margin-left:35px;
}
 
#fps
{
    margin-top:5px;
    margin-left:35px;
}
 
a
{
    color:rgba( 255, 255, 255, .65 );
    text-decoration: none;
}
 
a:hover
{
    color:rgba( 255, 255, 255, 1 );
}
 
    
    .trans3d
    {
        -webkit-transform-style: preserve-3d;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform-style: preserve-3d;
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform-style:preserve-3d;
        -ms-transform: translate3d(0, 0, 0);
        transform-style:preserve-3d;
        transform: translate3d(0, 0, 0);
 
        
    }
 
    #contentContainer
    {
        position:absolute;
        margin-left:-500px;
        margin-top:-500px;
        left:50%;
        top:50%;
        width:1000px;
        height:1000px;
    }
 
    #carouselContainer
    {
        position:absolute;
        margin-left:-500px;
        margin-top:-500px;
        left:50%;
        top:50%;
        width:1000px;
        height:1000px;
    }
 
    .carouselItem
    {
        width:320px;
        height:130px;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-160px;
        margin-top:-90px;
        visibility:hidden;
    }
 
    .carouselItemInner
    {
        width:320px;
        height:130px;
        position:absolute;
        background-color:rgba(255, 255, 255, .75);
        border:10px solid rgba(255, 255, 255, .5);
        color:aqua;
        font-size:72px;
        left:50%;
        top:50%;
        margin-left:-160px;
        margin-top:-90px;
        text-align:center;
        padding-top:50px;
 
    }




JS


        var w, container, carousel, item, radius, itemLength, rY, ticker, fps; 
        var mouseX = 0;
        var mouseY = 0;
        var mouseZ = 0;
        var addX = 0;
 
 
        
        
        var fps_counter = {
 
            tick: function () 
            {
                
                
                this.times = this.times.concat(+new Date());
                var seconds, times = this.times;
 
                if (times.length &gt; this.span + 1) 
                {
                    times.shift(); 
                    seconds = (times[times.length - 1] - times[0]) / 1000;
                    return Math.round(this.span / seconds);
                } 
                else return null;
            },
 
            times: [],
            span: 20
        };
        var counter = Object.create(fps_counter);
 
 
 
        $(document).ready( init )
 
        function init()
        {
            w = $(window);
            container = $( '#contentContainer' );
            carousel = $( '#carouselContainer' );
            item = $( '.carouselItem' );
            itemLength = $( '.carouselItem' ).length;
            fps = $('#fps');
            rY = 360 / itemLength;
            radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );
 
            
            TweenMax.set(container, {perspective:600})
            TweenMax.set(carousel, {z:-(radius)})
 
            
 
            for ( var i = 0; i &lt; itemLength; i++ )
            {
                var $item = item.eq(i);
                var $block = $item.find('.carouselItemInner');
 
        
        TweenMax.set($item, {rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});
 
                animateIn( $item, $block )                      
            }
 
            
            window.addEventListener( "mousemove", onMouseMove, false );
            ticker = setInterval( looper, 1000/60 );            
        }
 
        function animateIn( $item, $block )
        {
            var $nrX = 360 * getRandomInt(2);
            var $nrY = 360 * getRandomInt(2);
 
            var $nx = -(2000) + getRandomInt( 4000 )
            var $ny = -(2000) + getRandomInt( 4000 )
            var $nz = -4000 +  getRandomInt( 4000 )
 
            var $s = 1.5 + (getRandomInt( 10 ) * .1)
            var $d = 1 - (getRandomInt( 8 ) * .1)
 
            TweenMax.set( $item, { autoAlpha:1, delay:$d } )    
            TweenMax.set( $block, { z:$nz, rotationY:$nrY, rotationX:$nrX, x:$nx, y:$ny, autoAlpha:0} )
            TweenMax.to( $block, $s, { delay:$d, rotationY:0, rotationX:0, z:0,  ease:Expo.easeInOut} )
            TweenMax.to( $block, $s-.5, { delay:$d, x:0, y:0, autoAlpha:1, ease:Expo.easeInOut} )
        }
 
        function onMouseMove(event)
        {
            mouseX = -(-(window.innerWidth * .5) + event.pageX) * .0025;
            mouseY = -(-(window.innerHeight * .5) + event.pageY ) * .01;
            mouseZ = -(radius) - (Math.abs(-(window.innerHeight * .5) + event.pageY ) - 200);
        }
 
        
        function looper()
        {
            addX += mouseX
            TweenMax.to( carousel, 1, { rotationY:addX, rotationX:mouseY, ease:Quint.easeOut } )
            TweenMax.set( carousel, {z:mouseZ } )
            fps.text( 'Framerate: ' + counter.tick() + '/60 FPS' )  
        }
 
        function getRandomInt( $n )
        {
            return Math.floor((Math.random()*$n)+1);    
        }

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by johnblazek. Visit their official repository for more information and follow for future updates.



Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.