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]

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.

[WebMorfeusz]

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:

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!

[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

[trueblue]

Tagi zamykaj w poprawnej kolejności.

[WebMorfeusz]

Tagi zamykaj w poprawnej kolejności.

Dziękuję za uwagę. Poprawiłem. Niestety dalej linki się nakładają.

[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

[trueblue]

W linku, który podałem było tylko figure.
Proponowałbym Ci zostawić tylko a i img.

[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
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