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
Sephirus
post 4.12.2012, 16:42:21
Post #2





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

Posty w temacie
- lukash82   [CSS][HTML] Stałe tło   4.12.2012, 11:37:35
- - fate   Jeżeli Cię zrozumiałem to mam trywialne rozwiazani...   4.12.2012, 13:01:54
- - Sephirus   Nie wiem czy o to chodziło ale... Pisane na szybk...   4.12.2012, 13:06:45
- - lukash82   Witam, @Sephirus prawie idealnie zobrazowałeś to ...   4.12.2012, 15:51:58
- - Sephirus   Namotałeś nieco - z tego względu, że tło musi być ...   4.12.2012, 16:42:21
- - lukash82   Super, o to chodziło. Choć teraz zastanawiam się n...   4.12.2012, 18:31:31

« 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 · Przełącz na: Linearny+ · 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 - 23:22
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn