Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery]Efekt przenikania tła
Helid
post
Post #1





Grupa: Zarejestrowani
Postów: 280
Pomógł: 20
Dołączył: 12.12.2007
Skąd: 127.0.0.1

Ostrzeżenie: (0%)
-----

Chce zrobić płynny efekt przejścia z jednego tła (background-image url(imag1.jpeg)wink.gif do drugiego tła (background-image url(imag2.jpeg)wink.gif po wywołaniu pewnego zdarzenia. Czy istnieją do tego celu dedykowane rozwiązania w jQuery (efekt przenikania)?


--------------------
Portfolio
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
sonquer
post
Post #2





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 21.08.2012

Ostrzeżenie: (0%)
-----

Może spróbuj coś z tym : )

$('#nazwadiva').css({opacity : 0}).animate({opacity : 2}, 20000, function() {("#nazwadiva").css("top","px")});
Go to the top of the page
+Quote Post
d3ut3r
post
Post #3





Grupa: Zarejestrowani
Postów: 709
Pomógł: 176
Dołączył: 24.10.2010

Ostrzeżenie: (0%)
-----

http://www.ovalpixels.com/bgImageTransition/


--------------------
http://d3ut3r.wordpress.com/ | mysql_* jest przestarzałe UŻYWAJ PDO!
Go to the top of the page
+Quote Post
Helid
post
Post #4





Grupa: Zarejestrowani
Postów: 280
Pomógł: 20
Dołączył: 12.12.2007
Skąd: 127.0.0.1

Ostrzeżenie: (0%)
-----

Oba rozwiązania niestety prawdopodobnie nie nadają się. W moim projekcie chce zmienić tylko raz tło elementu body. Wspominany plugin działa jak zauważyłem w oparciu o zmianę przeźroczystości a co za tym idzie cała strona ulegnie nieporządnemu efektowi.


--------------------
Portfolio
Go to the top of the page
+Quote Post
Grzesie.k
post
Post #5





Grupa: Zarejestrowani
Postów: 17
Pomógł: 7
Dołączył: 7.08.2011

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>Test</title>
  5. 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  6. 		<style>
  7. body {
  8. 	margin:0;
  9. 	color:white;
  10. 	text-align:center;
  11. 	background-image:url(http://static.myopera.com/community/graphics/speeddials/Opera-Background-Colored-Lights.jpg);
  12. }
  13. h3:hover {
  14. 	text-decoration:underline;
  15. 	cursor:pointer;
  16. }
  17. 		</style>
  18. 		<script>
  19. $(function(){
  20. 	var bodyBg=new Array(
  21. 		'http://static.myopera.com/community/graphics/speeddials/Opera-Background-Colored-Lights.jpg', //aktualne tlo z css
  22. 		'http://topwalls.net/wp-content/uploads/2012/01/background.jpg' //nastepne tla, dowolna ilosc
  23. 	);
  24. 	$('h3').click(function(){
  25. 		var i;
  26. 		var body=$('body');
  27. 		for(i=0;i<bodyBg.length;i++) //ktore tlo aktulanie jest wyswietlane
  28. 			if('url('+bodyBg[i]+')'==body.css('background-image'))
  29. 				break;
  30. 		i=(i==bodyBg.length-1)?i=0:i+1; //jakie bedzie nastepne
  31. 		var obj=$('<div />').css({ //utworznie div z obrazkiem
  32. 			'position':'fixed',
  33. 			'z-index':-1,
  34. 			'top':0,
  35. 			'left':0,
  36. 			'right':0,
  37. 			'bottom':0,
  38. 			'background-image':'url('+bodyBg[i]+')'
  39. 		}).hide().prependTo(body).fadeIn('slow',function(){ //pojawienie sie div
  40. 			body.css('background-image','url('+bodyBg[i]+')'); //po zakonczeniu obrazek z div jest tlem body
  41. 			$(this).remove(); //a div jest usuwany
  42. 		});
  43. 	});
  44. });
  45. 		</script>
  46. 	</head>
  47. 	<body>
  48. 		<h1>Jakaś przykładowa zawartość</h1>
  49. 		<h2>Tak żeby zobaczyć że nie znika :)</h2>
  50. 		<h3>A tutaj kliknij żeby zmienić tło</h3>
  51. 	</body>
  52. </html>
[HTML] pobierz, plaintext

Testowane pod chrome smile.gif

Ten post edytował Grzesie.k 27.08.2012, 00:13:03
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 22:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn