Animacja we flashu lub php Opcje

[ZeTu]

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.

[kamil4u]

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ć.

[ZeTu]

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.

[kamil4u]

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

[ZeTu]

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.

Ten post edytował ZeTu 26.06.2012, 01:30:06

[kamil4u]

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

[ZeTu]

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 

Ten post edytował ZeTu 26.06.2012, 17:02:58

[kamil4u]

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

Kod

$("#go3").mouseover(function(){

$("#block1").animate({
width: "580px",
height: "197px",
opacity: 0.7,
fontSize: "3em",
borderWidth: "2px"
}, 1000 );

$("#block2").animate({
width: "580px",
height: "197px",
opacity: 0.7,
fontSize: "3em",
borderWidth: "2px"
}, 1000 );

$("#block3").animate({
width: "580px",
height: "197px",
opacity: 0.7,
fontSize: "3em",
borderWidth: "2px"
}, 1000 );

});

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

[ZeTu]

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.

Ten post edytował ZeTu 26.06.2012, 17:36:23

[kamil4u]

Nie rozumiem Daj link do demo i opisz o co chodzi

[ZeTu]

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 :/

[kamil4u]

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

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

Ten post edytował kamil4u 26.06.2012, 19:24:29

[ZeTu]

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ć?

[kamil4u]

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ś

[ZeTu]

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?

Ten post edytował ZeTu 26.06.2012, 20:33:03

[kamil4u]

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

[ZeTu]

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?

Ten post edytował ZeTu 26.06.2012, 21:26:20