Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML] Stałe tło, ale nie do końca...
lukash82
post 4.12.2012, 11:37:35
Post #1





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

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

Witam,

wydaje się, że prosta sprawa ale utknąłem w jednym miejscu kodu i jakoś nie mogę tego przeskoczyć... Mam prostą stronkę, powiedzmy coś takiego:

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="page">
  3. 	<div class="top"></div>
  4. 	<div class="middle"></div>
  5. 	<div class="footer"></div>
  6. </div>
  7. </body>
[HTML] pobierz, plaintext


I mam w szablonie graficznym w tło dodać takie dosyć duże zdjęcie, stałe wobec div-a "page". A więc prosta sprawa:

[CSS] pobierz, plaintext 
  1. body{ 
  2. 	margin			: 0;
  3. 	padding			: 0;
  4. 	background		: url('images/layout.jpg') top center no-repeat fixed;}
[CSS] pobierz, plaintext


Otrzymujemy efekt taki, że jeżeli jest więcej treści w div-ie "page" to jest on przewijalny w dół, ale tło jest statyczne, tzn tyle ile zmieściło się zdjęcia od góry ekranu.

Problem w tym, że zdjęcie w tle ma jakiś przekaz ale nie mieści się na ekranie w całości. Tyle ile od góry mamy miejsca tyle go widać... Chciałbym uzyskac efekt taki, że tło jest stałe tak jak teraz ale jeśli uzytkownik przewija stronę w dół, to w momencie gdy zaczyna dochodzi do stopki tło także zaczyna się przesuwać w górę... Widzę to oczami wyobraźni ale jakoś nie mogę tego zakodować... A może to jest niemożliwe technicznie...? Nie wiem czy dobrze to opisałem więc jak coś jest niejasne to proszę pytać. Jeśli macie jakieś pomysły to proszę o podpowiedź.

PS. Celem testów można podłożyć pod plik tła w powyższym kodzie jakiekolwiek zdjęcie z aparatu o wysokości np. 1500px, a do znacznika "middle" dopisać jakąś wysokość typu 3000px, etc.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
fate
post 4.12.2012, 13:01:54
Post #2





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

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

Jeżeli Cię zrozumiałem to mam trywialne rozwiazanie myślę. Musisz dać minimalną wysokość diva taka jak wysokosc obrazka tła wtedy wyświetli Ci całe tło no izostawić tą pozycję fixed jak treść będzie większa będzie się przewijało jak chciałeś. Nie wszystkie przeglądarki obsługują min-height więc tło może być w divie kontenerze obejmujacym a tresc w umieszczonym w nim koljnym divie.
Spróbuj jak o to biega sekret.gif


--------------------
Sklep ubrania lniane dla dzieci promocje
Go to the top of the page
+Quote Post
Sephirus
post 4.12.2012, 13:06:45
Post #3





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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

Nie wiem czy o to chodziło ale...

Pisane na szybko w czystym JS - musisz zmienić/dopasować pod siebie

http://jsfiddle.net/s8cN9/1/

Ten post edytował Sephirus 4.12.2012, 13:07:40


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
lukash82
post 4.12.2012, 15:51:58
Post #4





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

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

Witam,

@Sephirus prawie idealnie zobrazowałeś to co sobie wyobrażałem... Spróbuje obydwu rozwiązań.

Witam ponownie,

1 rozwiązanie niestety nie działa. Drugie działa tak jak to miało być w zamyśle, ale tylko dla div-a przez co tworzy się dodatkowy suwak przy większej ilości treści. Próbowałem to przełożyć na wyższy poziom do <body> ale coś niebardzo to działa..., albo sam coś pochrzaniłem...

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="pl">
  3. <head>
  4. <script>
  5. 	function scrollTheFreakingBackground() {
  6. 		var body = document.getElementById('body');
  7. 		var scrollPosition = parseInt(body.scrollTop);
  8. 		var scrollHeight = parseInt(body.scrollHeight);
  9. 		var offsetHeight = parseInt(body.offsetHeight);
  10. 		var pictureHeight = 1200;
  11. 		var scrollPercent = scrollPosition / (scrollHeight - offsetHeight);
  12. 		var newPositionOfBackground = -1 * (pictureHeight - offsetHeight) * scrollPercent;
  13. 		body.style.backgroundPosition = 'center ' + newPositionOfBackground + 'px';
  14. 	}
  15. 	document.getElementById('body').addEventListener('scroll',scrollTheFreakingBackground,false);
  16. </script>
  17. <style>
  18. 	body{ 
  19. 		margin			: 0;
  20. 		padding			: 0;
  21. 		overflow			: auto; 
  22. 		background		: green url('http://www.mega-tapety.info/wallpapers/krajobrazy/morzairzeki/tapety_na_pulpit_mega-tapety.info%20(177).jpg') top center no-repeat;}
  23. 	.txt{
  24. 		height			: 2000px;
  25. 		width				: 500px;
  26. 		background		: red;
  27. 		margin			: 0 auto;}
  28. </style>
  29. </head>
  30. <body id="body">
  31. <div class="txt"></div>
  32. </body>
  33. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Sephirus
post 4.12.2012, 16:42:21
Post #5





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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

Namotałeś nieco - z tego względu, że tło musi być tego samego elementu co przewijanie - zaraz poprawię i wrzuce wink.gif

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="pl">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <style type="text/css">
  6. 	body {
  7. 		margin			: 0;
  8. 		padding			: 0;
  9. 		overflow                : auto;
  10.                 height:200px;
  11. 		background		: green url('http://www.mega-tapety.info/wallpapers/krajobrazy/morzairzeki/tapety_na_pulpit_mega-tapety.info%20(177).jpg') center 0 no-repeat;
  12.         }
  13. 	.txt{
  14. 		height			: 2000px;
  15. 		width				: 500px;
  16. 		background		: rgba(255,0,0,0.5);
  17. 		margin			: 0 auto;}
  18. </style>
  19. <script type="text/javascript">
  20. function scrollTheFreakingBackground() {
  21.         var body = document.getElementById('body');
  22.         var scrollPosition = parseInt(body.scrollTop);
  23.         var scrollHeight = parseInt(body.scrollHeight);
  24.         var offsetHeight = parseInt(window.innerHeight);
  25.         var pictureHeight = 1200;
  26.         var scrollPercent = scrollPosition / (scrollHeight - offsetHeight);
  27.         if(pictureHeight > scrollHeight) {
  28.             var newPositionOfBackground = -1 * (pictureHeight - scrollHeight) * scrollPercent;
  29.         } else {
  30.             var newPositionOfBackground = (scrollHeight - pictureHeight) * scrollPercent;
  31.         }
  32.         body.style.backgroundPosition = 'center ' + Math.round(newPositionOfBackground) + 'px';
  33. }
  34.  
  35. window.addEventListener('load',function () {
  36.     window.addEventListener('scroll',scrollTheFreakingBackground,true);
  37. },false);
  38. </script>
  39. </head>
  40. <body id="body">
  41. <div class="txt">
  42. </div>
  43. </body>
  44. </html>
[HTML] pobierz, plaintext


Powinno śmigać na stronach mniejszych niż obrazek i większych niż obrazek - musisz jedynie dopracować kompatybilność z przeglądarkami (konkretnie z IE) smile.gif

EDIT: Ten kod przedstawia tylko idee - musisz go nieco zoptymalizować by zwiększyć wydajność (nie przy każdym wywołaniu ta funkcja musi pobierać wszystkie te parametry wink.gif)

Ten post edytował Sephirus 4.12.2012, 16:50:54


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
lukash82
post 4.12.2012, 18:31:31
Post #6





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

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

Super, o to chodziło. Choć teraz zastanawiam się nad ostatecznym efektem jaki został uzyskany. Tło strasznie przeskakuje przy przewijaniu i na dłuższą metę może to się okazać średnio efektowne... Ale wielkie dzięki za pomoc.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 Wersja Lo-Fi Aktualny czas: 14.08.2025 - 09:44
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn