3D Carousel TweenMax Code

<!DOCTYPE html>

<head>

<title>3D Carousel TweenMax.js & jQuery</title>

<style>

body

{

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;

}

{

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: 210px;

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;

overflow: hidden;

}

img{

width: 100%;

}

</style>

window.console = window.console || function(t) {};

</script>

</head>

</section>

</div>

// 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 > 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 < 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);

}

</script>

</body>

</html>

code4u

Search This Blog

3D Carousel TweenMax Code

Comments

Post a Comment