Dynamiczbe menu - efekt Carousel, Czyli co zamiast.. flasha. Opcje

[WebMorfeusz]

Witam,
chciałbym stworzyć menu przy pomocy JavaScript i CSS na wzór tego ze strony www.otherspace.pl - jest ono wykonane w technologii flash. Jak dotąd udało się mi osiągnąć efekt karuzeli widzianej "z zewnątrz". Obecnie borykam się jak zrobić, by stowrzyć taką karuzelę z widokiem "od środka", czyli by powstała taka animacja podobna do tej w wersji flash.. Czy jest to w ogóle możliwe?

By osiągnąć obecny stan posiłkowałem się tym skryptem: http://www.xeweb.net/2010/02/02/3d-carousel-using-jquery/

[WebMorfeusz]

Czy do takiego zastosowania również zmienić potrzeba css?

--- edit--

Po wprowadzonych modyfikacjach w takiej formie jak poniżej, dalej niestety nie działa poprawne linkowanie.

index.html
<div id="contentContainer" class="trans3d">
<section id="carouselContainer" class="trans3d">
<a href="#1"><div class="carouselItem trans3d"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo02.png" onmouseover="src='img/doradztwo02.png'" onmouseout="src='img/doradztwo02.png'"></div></a>
<a href="#2"><div class="carouselItem trans3d"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo02.png" onmouseover="src='img/doradztwo02.png'" onmouseout="src='img/doradztwo02.png'"></div></a>
<a href="#3"><div class="carouselItem trans3d"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo02.png" onmouseover="src='img/doradztwo02.png'" onmouseout="src='img/doradztwo02.png'"></div></a>
<a href="#4"><div class="carouselItem trans3d"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo02.png" onmouseover="src='img/doradztwo02.png'" onmouseout="src='img/doradztwo02.png'"></div></a>
<a href="#5"><div class="carouselItem trans3d"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo02.png" onmouseover="src='img/doradztwo02.png'" onmouseout="src='img/doradztwo02.png'"></div></a>
<a href="#6"><div class="carouselItem trans3d"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo02.png" onmouseover="src='img/doradztwo02.png'" onmouseout="src='img/doradztwo02.png'"></div></a>
<a href="#7"><div class="carouselItem trans3d"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo02.png" onmouseover="src='img/doradztwo02.png'" onmouseout="src='img/doradztwo02.png'"></div></a>
<a href="#8"><div class="carouselItem trans3d"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo02.png" onmouseover="src='img/doradztwo02.png'" onmouseout="src='img/doradztwo02.png'"></div></a>
<a href="#9"><div class="carouselItem trans3d"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo02.png" onmouseover="src='img/doradztwo02.png'" onmouseout="src='img/doradztwo02.png'"></div></a>

</section>

css
.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);

position: relative;
display:block;
margin: 0 auto;
width: 100%;
height: 100%;

/*-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;*/
}

#contentContainer
{
/*position:absolute;*/
position: relative;
display:block !important;
margin: 0 auto;
margin-top: -100px;
/*margin-left:-500px;
margin-top:-500px;
left:50%;
top:50%;
width:1000px;
height:1000px;*/
width: 100%;
height: 100%;
}

#carouselContainer
{
position: relative;
display:block !important;
margin: 0 auto;
margin-top: -100px;
width: 100%;
height: 100%;
/*
position:absolute;
margin-left:-500px;
margin-top:-500px;
left:50%;
top:50%;
width:1000px;
height:1000px;*/
}

.carouselItem
{
width:320px;
height:320px;
position:absolute;
left:50%;
top:50%;
margin-left:-160px;
margin-top:-90px;
visibility:hidden;
}

.carouselItemInner
{
width:320px;
height:320px;
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 (IMG:style_emoticons/default/smile.gif)
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( (0) / 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 = -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:180, rotationX:0, z:800, 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);
}

Ostatecznie kod odpowiedzialny za dodawanie obrazków wygląda tak:

<a class="carouselItem trans3d" href="strona1.html"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>
<a class="carouselItem trans3d" href="strona2.html"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>
<a class="carouselItem trans3d" href="strona3.html"><img id="item1" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>

Dalej niestety linki się nakładają.

Ten post edytował WebMorfeusz 5.02.2015, 18:58:34