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/

[trueblue]

Chciałbym zapytać, czy do tej wersji karuzeli potrzebny będzie osobny skyprt do "kierowania" nią zamiast tych przycisków?

A jak inaczej będzie "kierowana"?

Gdy tak poszukiwałem rozwiązania znalazłem taki skrypt: 3D Carousel Using TweenMax.js & jQuery.
Np. żeby obrazki nie były tak daleko oddalone?

Albo zwiększyć szerokość elementów, albo zwiększyć ich ilość.

[WebMorfeusz]

A jak inaczej będzie "kierowana"?

Chodziło mi o "kierowanie" ruchem myszki. Udało się stworzyć taką karuzelę.

Jedyna sprawa, która została do "ogarnięcia", to kwestia tych graficznych kółek. Chciałbym by każde prowadziło do strony. Jednak po przez "wejście" do środka karuzeli teraz są problemy z linkami. Na przykładzie tych trzech identycznych kółek widać, że linki są nie właściwe - powinny odnosić do strona01.html, strona02.html, strona03.html. Czasem na jednym kółku są aż dwa linki. Czy dałoby się ofarnąć jakoś tę ostatnią kwestię?

index.html

<div id="contentContainer" class="trans3d">
<section id="carouselContainer" class="trans3d">
<a href="strona01.html"><figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d"><img src="img/doradztwo01.png" width="320" height="320" alt="" onmouseover="src='doradztwo02.png'" onmouseout="src='doradztwo01.png'" border="0"></a></div></figure>
<a href="strona02.html"><figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d"><img src="img/doradztwo01.png" width="320" height="320" alt="" onmouseover="src='doradztwo02.png'" onmouseout="src='doradztwo01.png'" border="0"></a></div></figure>
<a href="strona03.html"><figure id="item3" class="carouselItem trans3d"><div class="carouselItemInner trans3d"><img src="img/doradztwo01.png" width="320" height="320" alt="" onmouseover="src='doradztwo02.png'" onmouseout="src='doradztwo01.png'" border="0"></a></div></figure>
<a href="strona04.html"><figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d">4</div></figure>
<a href="strona05.html"><figure id="item5" class="carouselItem trans3d"><div class="carouselItemInner trans3d">5</div></figure>
<a href="strona06.html"><figure id="item6" class="carouselItem trans3d"><div class="carouselItemInner trans3d">6</div></figure>
<a href="strona07.html"><figure id="item7" class="carouselItem trans3d"><div class="carouselItemInner trans3d">7</div></figure>
<a href="strona08.html"><figure id="item8" class="carouselItem trans3d"><div class="carouselItemInner trans3d">8</div></figure>
<a href="strona09.html"><figure id="item9" class="carouselItem trans3d"><div class="carouselItemInner trans3d">9</div></figure>
<a href="strona10.html"><figure id="item10" class="carouselItem trans3d"><div class="carouselItemInner trans3d">10</div></figure>
<a href="strona11.html"><figure id="item11" class="carouselItem trans3d"><div class="carouselItemInner trans3d">11</div></figure>
<a href="strona12.html"><figure id="item12" class="carouselItem trans3d"><div class="carouselItemInner trans3d">12</div></figure>
</section>
</div>

<script src='http://www.johnblazek.net/codepen-resources/3d-carousel/js/libs.min.js'></script>

<script src="js/index.js"></script>

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;

}

Ten post edytował WebMorfeusz 5.02.2015, 16:19:35