Witam
Szukałem w necie animacji podobnej do http://www.lurssen.com/#en/start, ale nigdzie nie mogłem znaleźć. Dokładnie chodzi o to że po nakierowaniu na jeden obrazek inne się zmniejszają i zmienia się tło.

Czy widzieliście coś podobnego do tej animacji? Tylko tak żeby można podpiąć swoje zdjęcia.
Bardzo mi na tym zależy.

Pozdrawiam i z góry dziękuje.

Można w łatwy sposób napisać w JS, a jeszcze prościej z użyciem biblioteki jQuery. Znasz, któryś z tych języków? Jeśli tak to mogę Ci opisać jak to zrobić.

Znam trochę JS, ale słabo. A mógłbyś napisać jak to zrobić? Bardzo bym cię o to prosił, bardzo mi na tym zależy.

To źle, że umiesz tylko podstawy, ale dobre i to.

Na początek musisz zrozumieć zdarzenia. W Twoim przypadku będą to zdarzenia myszy: mouseover( http://api.jquery.com/mouseover/ ) i mouseout( http://api.jquery.com/mouseout/ ). Dzięki tym zdarzeniom będziesz mógł wykonać stosowne efekty. W skrócie tworzysz 3 div-y( te bloki na które najeżdżasz i zmienia się strona ). Do każdego z nich przypisujesz owe zdarzenia. Zmiana tła: http://vegas.jaysalvat.com/ . Animacja div-ów: animate( http://api.jquery.com/animate/ ).

Teraz musisz zdać konkretniejsze pytania

Aha, w taki sposób, mi udało się zrobić coś takiego http://vv.zoba.eu/ ale to nie do końca to co chciałem uzyskać, chodzi o poruszanie tymi zdjęciami, chciałbym żeby się poruszały, tak jak na tej stronie co podałem na początku.

Najeżdżając myszką na element musisz animować wszystkie elementy na raz. Wtedy powinno Ci wyjść.

Czyli jak mam to zrobić, bo aktualnie mam tak:

[HTML] pobierz, plaintext 
<script>
$("#go").mouseover(function(){
  $("#block").animate({
    width: "580px",
    height: "197px",
    opacity: 0.7,
    fontSize: "3em",
    borderWidth: "2px"
  }, 1000 );
});
 
$("#go").mouseout(function(){
  $("#block").animate({
    width: "140px",
    height: "100px",
    opacity: 1,
    fontSize: "3em",
  }, 1000 );
});
 
$("#go2").mouseover(function(){
  $("#block2").animate({
    width: "580px",
    height: "197px",
    opacity: 0.7,
    fontSize: "3em",
    borderWidth: "2px"
  }, 1000 );
});
 
$("#go2").mouseout(function(){
  $("#block2").animate({
    width: "140px",
    height: "100px",
    opacity: 1,
    fontSize: "3em",
  }, 1000 );
});
 
$("#go3").mouseover(function(){
  $("#block3").animate({
    width: "580px",
    height: "197px",
    opacity: 0.7,
    fontSize: "3em",
    borderWidth: "2px"
  }, 1000 );
});
 
$("#go3").mouseout(function(){
  $("#block3").animate({
    width: "140px",
    height: "100px",
    opacity: 1,
    fontSize: "3em",
  }, 1000 );
});
</script>
[HTML] pobierz, plaintext 

Musisz zrobić tak, że jak najeżdżasz na dany box to np.:


Z tym, że inne wartości. Wtedy będziesz animował wszystkie box-y jednocześnie.

Kurde teraz mam problem, bo jak chce ten z samej lewej strony div w czasie powiększania przesunąć w lewo to coś nie idzie, coś nie tak robię.

[HTML] pobierz, plaintext 
$("#go").mouseover(function(){
  $("#block").animate({
    width: "580px",
    height: "197px",
    opacity: 0.7,
    fontSize: "3em",
    borderWidth: "2px",
    left: "200px",
    top: "27px"
  }, 1000 );
[HTML] pobierz, plaintext 

Ok, już wiem, zamiast left, czy top daje marginLeft, meginTop. A mogę wiedzieć czemu jest tak, że po nakierowaniu, czasami się rozwija, zwija i rozwija i tak kilka razy, a chce żeby tylko się rozwinęło, a nie szalało po ekranie.

Nie rozumiem Daj link do demo i opisz o co chodzi

hehe podawałem już, ale ok masz http://vv.zoba.eu/ i zobacz sobie jak to działa, po najechaniu na obrazek, powinien sie powiększyć i się powiększa, a po zjechaniu kursorem z obrazka, wszystkie wracają do poprzedniego stanu, ale gdy nakieruje na drugi obrazek, czyli ten na czarnym tle, to on się sam powiększa i zmniejsza, a powinien tylko raz się powiększyć, a nie zmniejszać i powiększać :/ nie wiem czemu tak jest.
Po prostu, najpierw oglądam efekty wszystkich zdjęć od lewej do prawej i to się psuje :/

Pewnie Ci się animacja kolejkuje: http://api.jquery.com/stop/

--edit--
Wiem, że podawałeś, ale chciałem, żebyś wrzucił najnowszą wersję

Kurde, próbuję każdym sposobem i mi nie wychodzi, możesz podać przykład na podstawie tego co ja robię jak mam to zablokować?

Mnie się wydaje, że teraz jest ok. Dodaj tylko: z-index i http://api.jquery.com/event.stopPropagation/ , żeby nie było efektu "zatrzymania" w trakcie animacji. I opisz po tych zmianach co jest jeszcze nie tak.

I jak nadal Ci nie będzie wychodziło to podmień ścieżki do obrazków na bezwzględne to spróbuję Ci pomóc dokładniej jakoś

Wierz zrobiłem w taki sposób:

[HTML] pobierz, plaintext 
$("#go").mouseover(function(){
  $("#block").stop().animate({
    width: "580px",
    height: "197px",
    opacity: 0.7,
    fontSize: "3em",
    marginTop: "157px",
    marginLeft: "450px",
    marginRight: "0px"
  }, 1000 );
[HTML] pobierz, plaintext 

I moim zdaniem jest ok, zobacz sam. Jak coś to napisz co jeszcze można by zmienić.

A to z-index, dać dla każdego diva inne czy to samo?

z-index większe dla aktualnie aktywnego.

Źle jest jeszcze, bo jak najedziesz na: środkowy, prawy środkowy to się psuje. Ale ważne, że idziesz w dobrym kierunku
Oczywiście kod też nie jest najwyższych lotów, ale najważniejsze, że Twój

Wiem, właśnie próbuje to jakoś naprawić albo trochę inny zrobić układ zdjęć. A z kodem to wiem, ale spokojnie, to tylko demo, zanim wrzucę do publikacji, to oczywiście wszystko ładnie zrobię

Edit
No i nie wiem jak przechodzę ze środkowego zdjęcia na lewe, to mi się psuje :/

Edit 2
A teraz jak wygląda? Mi się wydaje, że jest ok, to poruszanie obrazków.

A jeszcze jedno pytanie, bo jak będę robił menu poziome z rozwijanym, to jak zrobić żeby rozwijało w taki powolny sposób jak z tymi zdjęciami, tylko od góry do dołu, a później się chowało?