Forum PHP.pl > [jQuery]Efekt przenikania tła

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery]Efekt przenikania tła

Forum PHP.pl > Forum > Po stronie przeglądarki

Helid

21.08.2012, 14:12:23

Chce zrobić płynny efekt przejścia z jednego tła (background-image url(imag1.jpeg)

do drugiego tła (background-image url(imag2.jpeg)

po wywołaniu pewnego zdarzenia. Czy istnieją do tego celu dedykowane rozwiązania w jQuery (efekt przenikania)?

sonquer

21.08.2012, 14:25:12

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

$('#nazwadiva').css({opacity : 0}).animate({opacity : 2}, 20000, function() {("#nazwadiva").css("top","px")});

d3ut3r

22.08.2012, 08:10:29

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

Helid

25.08.2012, 14:24:23

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.

Grzesie.k

27.08.2012, 00:09:09

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
		<style>
body {
	margin:0;
	color:white;
	text-align:center;
	background-image:url(http://static.myopera.com/community/graphics/speeddials/Opera-Background-Colored-Lights.jpg);
}
h3:hover {
	text-decoration:underline;
	cursor:pointer;
}
		</style>
		<script>
$(function(){
	var bodyBg=new Array(
		'http://static.myopera.com/community/graphics/speeddials/Opera-Background-Colored-Lights.jpg', //aktualne tlo z css
		'http://topwalls.net/wp-content/uploads/2012/01/background.jpg' //nastepne tla, dowolna ilosc
	);
	$('h3').click(function(){
		var i;
		var body=$('body');
		for(i=0;i<bodyBg.length;i++) //ktore tlo aktulanie jest wyswietlane
			if('url('+bodyBg[i]+')'==body.css('background-image'))
				break;
		i=(i==bodyBg.length-1)?i=0:i+1; //jakie bedzie nastepne
		var obj=$('<div />').css({ //utworznie div z obrazkiem
			'position':'fixed',
			'z-index':-1,
			'top':0,
			'left':0,
			'right':0,
			'bottom':0,
			'background-image':'url('+bodyBg[i]+')'
		}).hide().prependTo(body).fadeIn('slow',function(){ //pojawienie sie div
			body.css('background-image','url('+bodyBg[i]+')'); //po zakonczeniu obrazek z div jest tlem body
			$(this).remove(); //a div jest usuwany
		});
	});
});
		</script>
	</head>
	<body>
		<h1>Jakaś przykładowa zawartość</h1>
		<h2>Tak żeby zobaczyć że nie znika :)</h2>
		<h3>A tutaj kliknij żeby zmienić tło</h3>
	</body>
</html>
[HTML] pobierz, plaintext

Testowane pod chrome

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.