Teoria obiektów 3D Opcje

[kiler129]

Witajcie!
Nieco nietypowe pytanie - kiedy obiekt wydaje nam się "odstawać od tła" ?
Chodzi mi o uzyskanie takiego efektu: http://webdev.stephband.info/parallax_demos.html tyle, że z jednym obiektem ale nie wiem jak teoretycznie się do tego zabrać. Wydaje mi się, że musze przesunąć element w przeciwną stronę i dodać pod nim cień ale to wraz będzie wyglądać płasko - jakieś rady?

[Kartofelek]

No płasko, ale efekt też ciekawy:

http://www.dom111.co.uk/blog/coding/jquery...nor-updates/125

Jednak przy 3 już jest o wiele lepiej:
http://webdev.stephband.info/parallax.html

Pewnie kilka elementów będzie nieodzownym, ale ja tam się nie znam

[kiler129]

jParallax jest fajny ale nie ma możliwości ustawienia innego triggera niż mysz ;/

[Kartofelek]

Pewnie nie ma, ale przecież nie problem w przerobieniu. W jquery obsługa klawiszy to bułeczka, wystarczy więc pożyczyć sobie kilka algorytmów z paralaxa i włala ;]

[mathijas]

Co do teorii to rzecz całkiem prosta.

1. Zakładasz ilość warstw, w tym przypadku 7.
2. Im warstwa "niżej" tym mniejsza i ciemniejsza.
3. Ustalasz środek geometryczny każdej warstwy.
4. Obliczasz odległość kursora myszy od środka geometrycznego i przesuwasz współrzędne obiektu o offset obliczony na przykład wzorem:

n - numer warstwy (od 1 do 7)
xP - współrzędna x środka obiektu
xK - współrzędna x kursora
p - parametr określający głębokość, czyli intensywność przesunięcia (im większy, tym mniej będą się warstwy przesuwały)

offset_x = 1/(p*n) * (xP - xK)

Dla y analogicznie.

Po przeanalizowaniu wzoru można dojść do wniosków:
- przesunięcie 1 warstwy będzie miało wzór 1/p * odległość, 2 warstwy: 1/2p * odległość, itd, czyli siódma warstwa będzie przesunięta najmniej (1/7 tego co pierwsza)
- jeśli kursor jest po prawej od środka, to xK>xP, a więc odległość będzie ujemna i przesunięcie w lewo - czyli im bardziej kursor w prawo, tym mocniej górne warstwy wędrują w lewo

Wzór jest banalny, więc odwzorowanie będzie proste, a przy odpowiednim dobraniu wzoru (np. rozkład wykładniczy) można uzyskać ciekawe efekty - dodatkowe wygięcie, czy coś :).

Pozdrawiam

Aha, przepraszam, czytać nie umiem.

Z jednym obiektem to chyba tylko cień da radę. W CSSie robisz shadow - dla każdej przeglądarki inaczej. W przypadku "dziwnych" kształtów najlepiej dać na drugiej warstwie - albo po prostu w tle - półprzezroczysty PNG z namalowanym cieniem. Jeśli interesuje Cię ruch na ekranie, to cień możesz zmieniać zmieniając definicję w CSS (sprawdź w docu offset cienia lub backgroundu, są dwa parametry od tego).

Pozdrawiam