Created
May 15, 2013 16:56
-
-
Save 1Marc/5585464 to your computer and use it in GitHub Desktop.
A CodePen by John Blazek. 3D Carousel Using TweenMax.js & jQuery - Wanted to explore some 3d carousel goodness, using DOM elements. Works best in Chrome/Safari, then FF, not 100% sure about IE 10. TO DO: Adding touch interaction with devices & animate into place and out.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header> | |
<h1>3D Carousel Using TweenMax.js & jQuery</h1> | |
<h3>A pen by <a href="http://www.twitter.com/johnblazek" target="_blank">@johnblazek</a></h3> | |
<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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 | |
// i used jQuery css selectors because TweenMax's z creates a weird perspective | |
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 = -4 | |
000 + 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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment