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]

Czemu służą elementy <figure> i <div>, nie wystarczyło <a> oraz <img>?

[WebMorfeusz]

Czemu służą elementy <figure> i <div>?

Służą one do poprawnego nadania odpowiedniego stylu, by bloki poprawnie się wyświetlały.

Aktualny kod:

<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"></div></figure></a>
<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"></div></figure></a>
<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"></div></figure></a>
<a href="strona04.html"><figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d">4</div></figure></a>
<a href="strona05.html"><figure id="item5" class="carouselItem trans3d"><div class="carouselItemInner trans3d">5</div></figure></a>
<a href="strona06.html"><figure id="item6" class="carouselItem trans3d"><div class="carouselItemInner trans3d">6</div></figure></a>
<a href="strona07.html"><figure id="item7" class="carouselItem trans3d"><div class="carouselItemInner trans3d">7</div></figure></a>
<a href="strona08.html"><figure id="item8" class="carouselItem trans3d"><div class="carouselItemInner trans3d">8</div></figure></a>
<a href="strona09.html"><figure id="item9" class="carouselItem trans3d"><div class="carouselItemInner trans3d">9</div></figure></a>
<a href="strona10.html"><figure id="item10" class="carouselItem trans3d"><div class="carouselItemInner trans3d">10</div></figure></a>
<a href="strona11.html"><figure id="item11" class="carouselItem trans3d"><div class="carouselItemInner trans3d">11</div></figure></a>
<a href="strona12.html"><figure id="item12" class="carouselItem trans3d"><div class="carouselItemInner trans3d">12</div></figure></a>
</section>
</div>

Ten post edytował WebMorfeusz 5.02.2015, 16:18:49