Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Parallax page - tło obrazkowe
lukasheek88
post 24.03.2016, 22:27:31
Post #1





Grupa: Zarejestrowani
Postów: 91
Pomógł: 0
Dołączył: 16.11.2011

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

Witajcie serdecznie,

przymierzam się do stworzenia, strony przewijanej w dół. Strona ma 4 sekcje. Każda sekcja jako tło ma obrazek szerokość 1400 px i wysokość 760px;

Zastanawiam się jak powinienem potraktować to tło, by w zależności od wielkości okna przeglądarki tło było wyświetlone na całym ekranie.

Kod CSS

[HTML] pobierz, plaintext 
  1. html, body {
  2.     margin: 0px;
  3.     padding: 0px;
  4.  
  5. }
  6.  
  7. section {
  8. 	height:740px;
  9. }
  10.  
  11. #first {
  12.     background: url('../img/sekcja_1.gif') scroll no-repeat;
  13. }
  14.  
  15. #second {
  16.     background: url('../img/sekcja_2.gif') scroll no-repeat;
  17. }
  18.  
  19. #third {
  20.     background: url('../img/sekcja_3.gif') scroll no-repeat center center;
  21. }
  22.  
  23. #foruth {
  24.     background: url('../img/sekcja_4.gif') scroll no-repeat center center;
  25. }
[HTML] pobierz, plaintext


Kod HTML

[HTML] pobierz, plaintext 
  1. <body>
  2.         <section id="first" class="anchor">
  3.  
  4.         </section>
  5.  
  6.         <section id="second" class="anchor">
  7.  
  8.         </section>
  9.  
  10.         <section id="third" class="anchor">
  11.  
  12.         </section>
  13.  
  14.         <section id="foruth" class="anchor">
  15.  
  16.         </section>
  17.  
  18.         <nav id="sidenav">
  19.             <ul>
  20.                 <li><a href="#first">1</a></li>
  21.                 <li><a href="#second">2</a></li>
  22.                 <li><a href="#third">3</a></li>
  23.                 <li><a href="#foruth">4</a></li>
  24.             </ul>
  25.         </nav>
  26.  
  27.     </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Arcioch
post 24.03.2016, 23:11:16
Post #2





Grupa: Zarejestrowani
Postów: 324
Pomógł: 110
Dołączył: 18.09.2012

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

Ja używam tego do robienie full page smile.gif http://alvarotrigo.com/fullPage/
Jeszcze przykład z wykorzystaniem tylko css oparty na Viewport Sized Typography Viewport Sized Typography

Ten post edytował Arcioch 24.03.2016, 23:14:21
Go to the top of the page
+Quote Post
lukasheek88
post 25.03.2016, 13:22:15
Post #3





Grupa: Zarejestrowani
Postów: 91
Pomógł: 0
Dołączył: 16.11.2011

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

A jak postąpić w takiej sytuacji:
Mam tło obrazkowe które chce by zawsze wyświetlane było w całości (nie chce by było rozciągane lub ucinane). I teraz jeżeli wyświetlam stronę na monitorze panoramicznym to chciałbym aby od góry do dołu tło wyświetlane było w 100% a po bokach dodawały się jakieś puste białe pola. Efektem chce mieć tło zawsze w 100% z zachowaniem proporcji.

Jakiś pomysł?
Go to the top of the page
+Quote Post
Arcioch
post 25.03.2016, 14:44:10
Post #4





Grupa: Zarejestrowani
Postów: 324
Pomógł: 110
Dołączył: 18.09.2012

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

Jeżeli wiesz jakie proporcję i wymiary ma obrazek to kombinacja media queries oraz background-size: contain tak mi się wydaje smile.gif
Inaczej to js i liczenie pixeli.
Go to the top of the page
+Quote Post
lukasheek88
post 25.03.2016, 15:10:06
Post #5





Grupa: Zarejestrowani
Postów: 91
Pomógł: 0
Dołączył: 16.11.2011

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

Mam jeszcze jedno pytanko, czy stworzenie "długiego" tła i wyświetlanie jego poszczególnych fragmentów jako tła w stronie typu "one page" to dobre rozwiązanie?

Napotkał się ktoś na przykład czegoś takiego ?
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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: Standardowy · Przełącz na: 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: 25.04.2024 - 04:26
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn