Skalowalne i poruszające się bg w divie - Wersja do druku +- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl) +-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www) +--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript) +--- Wątek: Skalowalne i poruszające się bg w divie (/thread-skalowalne-i-poruszajace-sie-bg-w-divie)

Skalowalne i poruszające się bg w divie - muchmorek - 23-05-2012 Witam, może ktoś z Was będzie miał jakiś pomysł w jaki sposób rozwiązać mój problem. Otóż chciał bym stworzyć background w divie, który pierw zostałby ze skalowany to odpowiednich rozmiarów, a następnie delikatnie "ruszałby" się. Już tłumaczę dokładnie: Background ma powiedzmy rozmiar 4000x5000. Chciałbym aby obrazek dopasował się do rozmiaru przeglądarki np. 1600x900, ale nie stracił przy tym proporcji. Tj. najlepiej, aby dopasował wysokość obrazka do okna, a potem wyśrodkował wszystko ucinając przy tym elementy z prawej i lewej strony elementu, które wychodzą poza rozmiar. Później cały "kadr" ma się poruszać po jakiejś wyznaczonej czy losowej osi, prezentując ucięte elementy. Wrzucam schemat, aby wszystko było bardziej obrazowe . Liczę na jakieś pomysły RE: Skalowalne i poruszające się bg w divie - Kartofelek - 23-05-2012 1) pobierasz wysokość okna przeglądarki $(window).height(); 2) ustawiasz rozmiar tego obrazka na pobraną wartość 3) nadajesz obrazkowi pozycjonowanie absolutne 3) zmniejszasz pozycję left obrazka do momentu ($img.offset().left >= -($img.width() - $(window).width())) 4) potem jedziesz w drugą stronę do momentu $img.offset().left < 0 RE: Skalowalne i poruszające się bg w divie - muchmorek - 23-05-2012 Czyli jednak bez nauki jQuery się nie obejdzie . No ale nic, trzeba usiąść i się za to jednak wziąć. W każdym bądź razie dzięki wielkie i gdybym miał z czymś problem to na pewnoe się zgłoszę ! RE: Skalowalne i poruszające się bg w divie - Kartofelek - 23-05-2012 Obejść się obejdzie. Wtedy musisz pouczyć się najnowszych technik CSS3: - skalowania backgroundu - transition - keyframes