Forum PHP.pl > Parallax page

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Parallax page - tło obrazkowe

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

lukasheek88

24.03.2016, 22:27:31

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 
html, body {
    margin: 0px;
    padding: 0px;
 
}
 
section {
	height:740px;
}
 
#first {
    background: url('../img/sekcja_1.gif') scroll no-repeat;
}
 
#second {
    background: url('../img/sekcja_2.gif') scroll no-repeat;
}
 
#third {
    background: url('../img/sekcja_3.gif') scroll no-repeat center center;
}
 
#foruth {
    background: url('../img/sekcja_4.gif') scroll no-repeat center center;
}
[HTML] pobierz, plaintext

Kod HTML

[HTML] pobierz, plaintext 
<body>
        <section id="first" class="anchor">
 
        </section>
 
        <section id="second" class="anchor">
 
        </section>
 
        <section id="third" class="anchor">
 
        </section>
 
        <section id="foruth" class="anchor">
 
        </section>
 
        <nav id="sidenav">
            <ul>
                <li><a href="#first">1</a></li>
                <li><a href="#second">2</a></li>
                <li><a href="#third">3</a></li>
                <li><a href="#foruth">4</a></li>
            </ul>
        </nav>
 
    </body>
[HTML] pobierz, plaintext

Arcioch

24.03.2016, 23:11:16

Ja używam tego do robienie full page

http://alvarotrigo.com/fullPage/
Jeszcze przykład z wykorzystaniem tylko css oparty na Viewport Sized Typography Viewport Sized Typography

lukasheek88

25.03.2016, 13:22:15

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ł?

Arcioch

25.03.2016, 14:44:10

Jeżeli wiesz jakie proporcję i wymiary ma obrazek to kombinacja media queries oraz background-size: contain tak mi się wydaje

Inaczej to js i liczenie pixeli.

lukasheek88

25.03.2016, 15:10:06

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 ?

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.