[js]Ruchome tło Opcje

[styryl]

Witam,

Mam takie pytanko jak zrobić aby tło (img) diva się ruszało tzn mamy sobie div o wymiarach powiedzmy 100x100 i w css wrzucamy mu jak tło zdjecie o wymiarach 200x200 i jak teraz zrobić aby płynnie się poruszało te tło;

[HTML] pobierz, plaintext 
<div id="tlo>
 
 
</div>
 
 
css:
 
 
#tlo{
width: 100px;
height: 100px;
background: url('img/tlofirma.png') no-repeat;
}
 
[HTML] pobierz, plaintext 

prosze o jakis przykład najlepiej z wykorzystaniem jquery.

Pozdrawiam

[zegarek84]

sprawa wygląda tak:

jest div o wymiarach 100 px na 100 px, jeżeli w css wstawimy mu tło jako obrazek o wielkości 200 px na 200 px to w divie będzie jedynie wycinek tego tła czyli 100 px na 100 px a reszta tego tła będzie niewidoczna. Mi chodzi o to aby uzyskać taki efekt aby w granicach tego diva 100 px na 100 px płynnie preszuwało się tło (czyli ten obrazek 200 px na 200 px) gdzie widoczna czesc wynosi 100 px na 100 px.

background-position
jak już napisałem niżej to nie kasuje ;p - idea jest taka sama plus link do wyników na google z wyświetloną własnością css
...

http://www.aaronvanderzwan.com/maximage/

wszystko ładnie pięknie, tyle, że obrazek w podanym przykładzie można tak wy pozycjonować w samym css by wyglądał jak tło i się sam skalował ;p

co do pierwszego postu też nie do końca rozumiem gdyż nie wiem, w jakim sensie ma się to tło ruszać - jeśli będzie jako standardowe tło to na pewno nie da się skalować ;p - a reszta, czyli ruch to zmiana parametrów css z poziomu js...

co do samej płynności to jeśli przesówa się o jeden piksel to tu nie ma co tłumaczyć - jeśli o więcej niż jeden (przelatujący przez ekran obiekt w ciągu sekundy - 1000 zminan na tą sekundę to życzę powodzenia ;p) to trzeba zrobić tak jak filmy są zrobione, czyli powyżej 20 zmian na sekundę - najlepiej 25 zmian pozycji w ciągu sekundy - oko zauważy "płynny" ruch (IMG:style_emoticons/default/winksmiley.jpg)

tu jeszcze pasowało by napomnieć o optymalizacji tego, gdyż w niektórych przeglądarkach może to się ciąć... i teraz tak, przy zmianie własności w DOM przeglądarka zmiany renderuje od razu - dla przykładu i lepszego tłumaczenia nie tło a obrazek przesówamy, dla uproszczenia oparte to o position absolute - jeśli animujemy wiele elementów - uprośćmy do jednego obrazka bo liczbami zarzucę - przez zmianę np. przez zmianę marginesów lewego i top:
gdzie $el w js ma już zapamiętaną rozwiniętą część do tyli czyli $el=obiekt.style;
$el.marginLeft=$x;
$el.marginTop=$y;

to jak najbardziej odlecam - zwłaszcza, jeśli na stronie chcecie uzyskać np. efekt sniegu (wiele płatków, wiele obiektów, wiele zmian)
i tu dla jednego obrazka w dom 2 razy zrobiliśmy zmianę do jednej zmiany pozycji - przeglądarka renderuje to 2 razy zamiast raz - teraz to przemnóżcie sobie razy wszystkie zmiany * liczba elementów * liczba "klatek" - zdecydowanie zbyt często się renderuje to w przeglądarce ;p....

o wiele lepiej jest to wszystko policzyć w pierw, elementy/obrazki mają jakieś wygenerowane na początku id - identyfikator... i teraz najlepiej zrobić coś w tym stylu:
każdy element ma odpowiednik w tablicy, przy obliczeniach w petli zbieramy dane:
for(...){$styl[$i]=['#obr',$i,'{margin-left:',$vars.wspolrzedne[$i].$x,';margin-top:',$vars.wspolrzedne[$i].$y,';}'].join('');/*tą linijke skopiowałem - może malo mówi ale widać, że tu jest kenerowany fragment css dla obrazka o id=obr[cośtam] */}

po pętli np.:
$styl=$styl.join('');
$vars.style.firstChild.nodeValue=$styl;

gdzie w tym przykładzie pod $vars.style jest zapamiętany obiekt z drzewa dom wcześniej utworzony:
$vars.style=document.createElement('style');
$vars.style.appendChild(document.createTextNode(''));
document.getElementsByTagName('head')[0].appendChild($vars.style);

co do powyższych przykładów jeszcze ktoś wspomnieć mógł np o:
$vars.$img[$i].setAttribute('style', 'no tu ustawiamy pozycjonowanie'); - ta metoda jest lepsza od:
$el.marginLeft=$x;
$el.marginTop=$y;
gdyż dla danego obrazka jest tylko raz zmiana i raz jest generowana strona, ale gorsza od opisanej powyżej jeśli tych obrazków trochu na stronie dosyć czesto animujemy...


sorki - wyszło takie małe rozważanie przy okazji lekko o ptymalności animacji i płynności - powyższe jeśli to sa obrazki możesz też dynamicznie skalować, tło możesz przemieszczać, jednak nie możesz skalować - napisałem o wszystkim i o niczym bo pytania nie sprecyzowałeś ;p

Ten post edytował zegarek84 5.01.2010, 17:23:06