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.
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
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 > 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); } |
See live demo and download source code.
This awesome script developed by johnblazek. Visit their official repository for more information and follow for future updates.
