PDA

Zobacz pełną wersję : Dynamiczne menu - ikony poruszające się po okręgu. Czyli co zamiast flasha..



WebM
06-02-15, 19:36
Witam,
próbuję stworzyć przy pomocy JavaScript dynamiczne menu z animacją podobną do tej ze strony Otherspace wykonaną technologią flash.

Dotychczas, modyfikując i opierając się na skrypcie ze strony 3D Carousel Using TweenMax.js and jQuery udało się mi stworzyć podobną animację.

W czym problem? Problemem są dla mnie linki do poszczególnych "kółek". Pomimo osobnego podlinkowania w html-u linki się albo nakładają (na jednym kółku - dwa) albo gubią. Proszę o wskazówkę jak rozwiązać tę kwestię, ew. czy byłaby możliwość zastosowania innego skryptu, który by pozwolił na podobną animację co we flashu.


index.html

<div id="contentContainer" class="trans3d">
<section id="carouselContainer" class="trans3d">
<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="item2" 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="item3" 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="item4" 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="item5" 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="item6" 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="item7" class="carouselItemInner trans3d" src="img/doradztwo01.png" onMouseOver="src='img/doradztwo01.png'" onMouseOut="src='img/doradztwo01.png'"></a>


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;

}