[jquery] przesuwanie diva z tłem w nieskonczonej pętli Opcje

[basu]

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/

Ten post edytował basu 21.07.2009, 21:35:36

[Fifi209]

Stwórz taki dłuugi obrazek i zmieniaj mu pozycję. (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[basu]

wlasnie nie chce tworzyc dlugich obrazkow, tylko zapętlić krótki (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) wiem że sie da, tylko jak?

[ayeo]

Witam!



No bardzo łatwo (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) 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!

[basu]

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?

[ayeo]

Witam!

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



Pozdrawiam!

[basu]

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

[ayeo]

Kod

$('#ground').css("background-position", "0px bottom");

Czytaj manual (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Pozdrawiam!

[basu]

Dziekuje za Twoja pomoc (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
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 (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

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

Ten post edytował basu 21.07.2009, 22:55:28

[ayeo]

Witam!

Chyba nie czytałeś mojego posta :/

Pozdrawiam!

[basu]

No to kolega daje mi do myslenia (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
No to naprawde nie wiem gdzie popelniam blad (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

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!

[ayeo]

Witam!

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

Pozdrawiam!

[basu]

OK, nie zauwazylem (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

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 

Ten post edytował basu 21.07.2009, 23:25:12

[ayeo]

(IMG:http://files.getdropbox.com/u/216241/jQuery.png)

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

[basu]

[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");

Ten post edytował basu 21.07.2009, 23:49:44

[ayeo]

Witam!

JAKO CALLBACK MASZ DAĆ ANIMATION2();

Pozdrawiam!

[basu]

[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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)


// no! (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
// ayeo


Ten post edytował ayeo 22.07.2009, 00:17:56