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 );
}
 
/* hardware accelatator class */    
    .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);
 
        /*-webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility:hidden;
        backface-visibility:hidden;*/
    }
 
    #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

// set and cache variables
        var w, container, carousel, item, radius, itemLength, rY, ticker, fps; 
        var mouseX = 0;
        var mouseY = 0;
        var mouseZ = 0;
        var addX = 0;
 
 
        // fps counter created by: https://gist.github.com/sharkbrainguy/1156092,
        // no need to create my own :)
        var fps_counter = {
 
            tick: function () 
            {
                // this has to clone the array every tick so that
                // separate instances won't share state 
                this.times = this.times.concat(+new Date());
                var seconds, times = this.times;
 
                if (times.length &gt; this.span + 1) 
                {
                    times.shift(); // ditch the oldest time
                    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 ) );
 
            // set container 3d props
            TweenMax.set(container, {perspective:600})
            TweenMax.set(carousel, {z:-(radius)})
 
            // create carousel item props
 
            for ( var i = 0; i &lt; itemLength; i++ )
            {
                var $item = item.eq(i);
                var $block = $item.find('.carouselItemInner');
 
        //thanks @chrisgannon!        
        TweenMax.set($item, {rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});
 
                animateIn( $item, $block )                      
            }
 
            // set mouse x and y props and looper ticker
            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);
        }
 
        // loops and sets the carousel 3d properties
        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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.