jak przesuwać tło w divie, tworząc tylko krótki obrazek tła i powtarzać go w pętli?

Znalazlem taki przyklad, ktory prawie mi odpowiada, ale tutaj tworza długi obrzek tła na szerokość 1000px i animuja tylko 1 raz.

http://robot.anthonycalzadilla.com/

Stwórz taki dłuugi obrazek i zmieniaj mu pozycję.

wlasnie nie chce tworzyc dlugich obrazkow, tylko zapętlić krótki wiem że sie da, tylko jak?

Witam!



No bardzo łatwo Powiedzmy, że masz obrazek picture.png o wymiarach 300x200. R0bisz sobie tzw okienko czyli ten widoczny fragment (załóżmy, że wielkości tej samej co obrazek). Dajesz mu overflow: hidden. W środku wstawiasz diva o szerokości takiej jak suma obrazków (może być ten sam powtórzony 2 razy). Przesuwasz sobie ten kontener (ten co zawiera te 2 obrazki) i jak przesuniesz więcej niż szerokość to wracasz o szerokość. Czyli wizualnie jesteś w tym samym miejscu, a masz co przesuwać.



Mam nadzieję, że jasne.



Pozdrawiam!

zrobilem cos takiego do tej pory:

[HTML] pobierz, plaintext 
$(document).ready(function(){ 
 
$('#ground').css({backgroundPosition: 'left bottom'});
 
$('#wrapper').css({overflow: "hidden"});
 
animation();
//setTimeout("animation2()",10000);		
});
 
function animation() {
	$('#ground').animate({backgroundPosition: '(-500px bottom)'}, 1000);
	animation2();
}
 
function animation2() {
	$('#ground').animate({backgroundPosition: '(0px bottom)'}, 10000);
	animation();
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
div {position: relative;}
 
#wrapper {
background: #bedfe4 url(sun.png) no-repeat left -30px;
border: 5px solid #402309;
height: 400px;
width:500px;
}
 
#ground {
	background: url(ground-05.png) no-repeat left bottom;
	height: 400px;
       width: 1000px;
}
 
#branding {
	background: url(robot-head.png) no-repeat center top;
	width: 271px;
	height: 253px;
	z-index: 4;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="wrapper">
   <div id="ground"></div>
</div>
[HTML] pobierz, plaintext 

teraz obrazek jest zapetlony i jedzie od lewe do prawej i odwrotnie. Jak zmienic ten kod aby dzialal tak jak opisujesz? Nie wiem jak zmienic javascript, aby przesunal pozycje do poczatku "przeskakujac" do do poczatkowej pozycji i wtedy Twoj sposob moglby zadzialac...
probowalem wstawić $('#ground').css({backgroundPosition: 'left bottom'}); i zresetowac pozycje do poczatku w animation2(), ale nie dziala.
Sugestie?

Witam!

No zamiast tego callbacka animation2() zrób funkcję, która przesunie (bez animacji) obrazek o szerokość i odpali ponownie animation();



Pozdrawiam!

[HTML] pobierz, plaintext 
function animation2() {
	$('#ground').css({backgroundPosition: '(0px bottom)'});
	animation();
}
[HTML] pobierz, plaintext 

w tym miejscu wlasnie sie zacialem i probuje pol dnia zmusic to do dzialania? Ten kod nie dziala, animacja idzie w jedna strone i staje w miejscu.
Moze masz jakis dzialajacy przyklad?

Czytaj manual

Pozdrawiam!

Dziekuje za Twoja pomoc
rzecz w tym ze czytalem i dalej ne dziala. zatrzymuje sie i nie zmienia ani pozycji ani nie idzic od nowa. Dochodze od prawej do lewej i na tym sie konczy animacja

[HTML] pobierz, plaintext 
function animation() {
	$('#ground').animate({backgroundPosition: '(-500px bottom)'}, 10000);
	animation2();
}
 
function animation2() {
	$('#ground').css({backgroundPosition: '0px bottom'});
	animation();
}
[HTML] pobierz, plaintext 

Witam!

Chyba nie czytałeś mojego posta :/

Pozdrawiam!

No to kolega daje mi do myslenia
No to naprawde nie wiem gdzie popelniam blad

jak zrobic zamiast callbacka animation2() zrobic funkcję, która przesunie (bez animacji) obrazek o szerokość i odpali ponownie animation(). Moze tutaj? Tylko nie mam pojecia jak...

ani zadne wariacje backgroundPosition tez nie dzialaja np:

[HTML] pobierz, plaintext 
function animation2() {
	$('#ground').css({backgroundPosition: '0 0'});
	animation();
}
[HTML] pobierz, plaintext 

Pozdrawiam!

Witam!

Spójrz na swój kod i spójrz na mój!

Pozdrawiam!

OK, nie zauwazylem

Dalej nie dziala... Zmienilem na cos takiego, ale tez bez powodzenia

[HTML] pobierz, plaintext 
$(document).ready(function(){ 
   animation();	
   setTimeout("animation2", 1000);
});
 
function animation() {
	$('#ground').animate({backgroundPosition: '(-500px bottom)'}, 1000);
}
 
function animation2() {
	$('#ground').css("backgroundPosition", "0px bottom");
	animation();
}
[HTML] pobierz, plaintext 

edit: i daj to jako callback, powywalaj te setTimeout!!

[HTML] pobierz, plaintext 
$(document).ready(function(){ 
   animation();	
});
 
function animation() {
	$('#ground').animate({backgroundPosition: '(-500px bottom)'}, 10000);
	animation2();
}
 
function animation2() {
        //$('#ground').animate("background-position", "0 bottom");
	//$('#ground').css("background-position", "0px bottom");
	$('#ground').animate({backgroundPosition: '(0px bottom)'});
	animation();
}
[HTML] pobierz, plaintext 

widac teraz nieladne przesuniecie: $('#ground').animate({backgroundPosition: '(0px bottom)'});
wogole nie lapie: $('#ground').css("background-position", "0px bottom");

Witam!

JAKO CALLBACK MASZ DAĆ ANIMATION2();

Pozdrawiam!

[HTML] pobierz, plaintext 
$(document).ready(function(){ 
   animation();	
});
 
function animation() {
	$('#ground').animate({backgroundPosition: '(-500px bottom)'}, 10000, '', animation2);
}
 
function animation2() {
	$('#ground').css("background-position", "0px bottom");
	animation();
}
[HTML] pobierz, plaintext 

dziala


// no!
// ayeo