Przewijany div wraz z scrollem.

0

Witam.
Mam do Was specjaliści pytanie, mianowicie jak zrobić efekt przewijanego tła wraz z przewijaniem paska przeglądarki?
Przykład: http://pawelcengiel.pl/

Z Góry dziękuje za odpowiedź,
pozdrawiam.

0

Podejrzyj sobie w kodzie źródłowym ;-) Generalnie - nasłuch na przewijanie okna, zapewne $("body").scroll(funtion() { ... }), a w nim zmiana położenia elementu z tłem, która na tej konkretnej stronce jest robiona poprzez zmianę margin-top.
Stronka, którą podałeś, jest zrobiona dość słabo i niedokładnie, więc nie bierz jej jako wzorcowego rozwiązania.

0

To, że się przesuwa to tam nic, istotne jest to, że przesuwa się w innym tempie niż scroll.
Taka technika nazywa się "parallax scrolling" i jeżeli chcesz uzyskać coś więcej niż podstawowy efekt - to jest to trochę roboty i początkujący będzie miał z tym dużo problemów raczej.

0

Faktycznie, okazało się sporo trudniejsze niż myślałem, głównie przez rozjazdy html/html5 i IE/Chrome. Poniżej działający (IE9, CH, FF) przykład:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		body {
			background:url('test.jpg') ;
			background-attachment:fixed;
			background-size: cover;
			margin:0;
			overflow:auto;
		}
		div { padding: 50px; }
	</style>
</head>
<body>
	<div>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
	</div>
	<div>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
	</div>
	<div>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
		<p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
	</div>


	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		var f = function () {
			var scrollTop = $('html').scrollTop();
			scrollTop = scrollTop > 0 ? scrollTop : $('body').scrollTop();

			$('body').css('background-position', '0 -' + (scrollTop / 2) + 'px');
		};

		window.addEventListener("scroll", f);
		$(f);
	</script>
</body>
</html>

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto