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/
Pełna wersja: Dynamiczbe menu - efekt Carousel
http://desandro.github.io/3dtransforms/docs/carousel.html
https://www.webkit.org/blog-files/3d-transf...ter-circle.html
http://codecanyon.net/item/codingjacks-3d-carousel/2958101
W przypadku translacji na osi Z powyżej (dużo) zera połowa karta znajdzie się za obserwatorem.
https://www.webkit.org/blog-files/3d-transf...ter-circle.html
http://codecanyon.net/item/codingjacks-3d-carousel/2958101
W przypadku translacji na osi Z powyżej (dużo) zera połowa karta znajdzie się za obserwatorem.
Bardzo dziękuję za zainteresowanie i pomoc. Chciałbym zapytać, czy do tej wersji karuzeli potrzebny będzie osobny skyprt do "kierowania" nią zamiast tych przycisków?
Gdy tak poszukiwałem rozwiązania znalazłem taki skrypt: 3D Carousel Using TweenMax.js & jQuery.
Znalazłem tam taki fragment:
Oryginalnie z:0 ja zmianiłem właśnie na 800 i udało się mi wejść "do środka". Zmieniłem jeszcze rotationY: na 180. Czy ma ktoś jeszcze ew. jakieś pomysły by coś zmienić by uzyskać podobny efekt jak ten we flashu? Np. żeby obrazki nie były tak daleko oddalone?
Pozdrawiam serdecznie!
Gdy tak poszukiwałem rozwiązania znalazłem taki skrypt: 3D Carousel Using TweenMax.js & jQuery.
Znalazłem tam taki fragment:
Cytat
TweenMax.to( $block, $s, { delay:$d, rotationY:0, rotationX:0, z:800,
Oryginalnie z:0 ja zmianiłem właśnie na 800 i udało się mi wejść "do środka". Zmieniłem jeszcze rotationY: na 180. Czy ma ktoś jeszcze ew. jakieś pomysły by coś zmienić by uzyskać podobny efekt jak ten we flashu? Np. żeby obrazki nie były tak daleko oddalone?
Pozdrawiam serdecznie!
Cytat(WebMorfeusz @ 3.02.2015, 17:37:03 ) 
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"?
Cytat(WebMorfeusz @ 3.02.2015, 17:37:03 )
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?
Np. żeby obrazki nie były tak daleko oddalone?
Albo zwiększyć szerokość elementów, albo zwiększyć ich ilość.
Cytat(trueblue @ 3.02.2015, 19:55:21 )
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
Cytat
<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>
<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
Cytat
.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;
}
{
-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;
}
Tagi zamykaj w poprawnej kolejności.
Cytat(trueblue @ 4.02.2015, 19:50:05 )
Tagi zamykaj w poprawnej kolejności.
Dziękuję za uwagę. Poprawiłem. Niestety dalej linki się nakładają.
Czemu służą elementy <figure> i <div>, nie wystarczyło <a> oraz <img>?
Cytat(trueblue @ 4.02.2015, 20:17:20 )
Czemu służą elementy <figure> i <div>?
Służą one do poprawnego nadania odpowiedniego stylu, by bloki poprawnie się wyświetlały.
Aktualny kod:
Cytat
<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>
<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>
W linku, który podałem było tylko figure.
Proponowałbym Ci zostawić tylko a i img.
Proponowałbym Ci zostawić tylko a i img.
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.
Ostatecznie kod odpowiedzialny za dodawanie obrazków wygląda tak:
Dalej niestety linki się nakładają.
--- edit--
Po wprowadzonych modyfikacjach w takiej formie jak poniżej, dalej niestety nie działa poprawne linkowanie.
Cytat
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>
<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>
Cytat
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;
}
.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;
}
Cytat
.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( (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);
}
// 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( (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:
Cytat
<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>
<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ą.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.