Responsywna strona z podmienianymi tłami przewijaniem tła HTML scroll

szkolenia bezpłatne kolejne lekcje
kursy, porady, artykuły znajdziesz w Menu Tematycznym
 
 

Responsywne mobilne strony internetowe kurs bezpłatny

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć

Responsywna strona z podmienianymi tłami przewijaniem tła HTML scroll

Responsywna strona z podmienianymi tłami przewijaniem tła HTML scroll

 

Responsywna strona z podmienianymi tłami przewijaniem tła HTML scroll

 

Witaj serdecznie w kolejnej części szkolenia dotyczącego technologii internetowych. Dzisiaj zabawimy się w zrobienie strony, takiej ze zmienianymi tłami. Zobacz działający wzór www.pol-fashion.eu. Przesuwasz (skrolujesz, przewijasz) tekst html a pod spodem zmieniają się tła. Jak coś takiego osiągnąć? Prosta sprawa wystarczy HTML5 plus CSS3.

HTML deklaracje HTML5 HEAD

Jest to strona html, więc musisz stworzyć całą strukturę html. Zacznij od deklaracji związanych z HTML5.

Doctype HTML mówi nam, że jest to strona zrobiona w technologii HTML5 Mamy także wersję językową, kodowanie znaków UTF-8, no i viewport, o którym już mówiłem. Dalej opis, słowa kluczowe, autor strony, tytuł strony. Standardowe elementy strony internetowej, w tym także linkowanie stylów css. Jeśli nie znasz zasad budowy HEAD BODY strony internetowej zajrzyj do mojego wcześniejszego szkolenia, w którym w sposób opisowy pokazywałem jak zbudowana jest strona internetowa. Filmiki znajdziesz na YouTube na moim kanale poswojsku oraz tutaj na www.poswojsku.info (boczne menu).

Dalej w HTML jest body czyli kod, który powoduje nam wyświetlanie określonych elementów na naszej stronie internetowej. Tutaj tego kodu wcale nie ma wcale zbyt dużo Akurat ta strona wspomagana jest przez jQuery, choć w niewielkim stopniu. jQuery powoduje, że jest menu mobilne menu w momencie kiedy strona jest wyświetlana na urządzeniach mobilnych.

HTML BODY HTML5

W sekcji BODY w kodzie strony znajdziesz: sliderPage1, sliderPage2, sliderPage3, itd. W tych div-ach, tzn. o id sliderPage mamy tekst html, czyli to co się przesuwa. Natomiast między sliderami znajduje się specjalny div, o klasie image, który stanowi tło. Tło, które się pojawia za danym div’em z tekstem. Uzyskujemy to poprzez taki właśnie kod, czyli poprzez ustawienie tła obrazka. Class image, no właśnie co to jest class image, zerknij dalej w kolejnej części tego poradnika znajdziesz opis kodu CSS.

<!DOCTYPE html>
<!--  Copyright 2016: poswojsku.pl sp. z o.o. www.poswojsku.eu  -->
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsywna strona z przewijanym tłem obrazkowym">
    <meta name="keywords" content="responsywna, strona, z przewijanym, tłem, obrazkowym">
    <meta name="author" content="poswojsku Creative Agency Darek Gołębiowski">
    <title>Responsywna strona z przewijanym tłem obrazkowym</title>
    <link rel="stylesheet" href="appWebpageCssShadowMenu.css">
</head>
<body>
    <div id="nawigacja">
        <ul id="mainNav">
            <li class="doradztwo"><a href="http://www.gddm.com.pl/biznesplan-lodz-zdwola-lask-sieradz-poddebice-kal..." target="_blank">Doradztwo</a>
            </li>
            <li class="programowanie"><a href="http://www.gddm.com.pl/programowanie.html" target="_blank">JavaScript</a>
            </li>
            <li class="szkolenia"><a href="http://www.gddm.com.pl/szkolenia.html" target="_blank">Szkolenia</a>
            </li>
            <li class="grafikaanimacja"><a href="http://www.gddm.com.pl/multimedia.html" target="_blank">Grafika</a>
            </li>
            <li class="grafikaanimacja"><a href="http://www.gddm.com.pl/multimedia.html" target="_blank">Animacja</a>
            </li>
            <li class="portale"><a href="http://www.gddm.com.pl/portale-wydawnictwo-reklama.html" target="_blank">poswojsku</a>
            </li>
        </ul>
        <div class="menuResponsywne">
            <img src="img/ikonka-menu-mobilne.png" alt="menu mobilne ikonka" />
        </div>
    </div>
    <div id="sliderPage1">
        <div class="div_dg">
            <div class="lewy">
                <a href="http://www.gddm.com.pl/biznesplan-lodz-zdwola-lask-sieradz-poddebice-kal..." target="_blank">DORADZTWO</a>
                <p>doradztwo IT</p>
                <p>doradztwo biznesowe</p>
                <p>usługi IT</p>
                <p>analizy biznesowe i IT</p>
            </div>
            <div class="prawy">
                <p><img src="images/poswojsku-info-logo.png" alt="poswojsku.info bezpłatne szkolenia i porady on-line"></p>
            </div>
        </div>
    </div>
    <div class="image" style="background-image: url(images/poswojsku-graphics-animations-web-technology1539x779.jpg)">
    </div>
    <div id="sliderPage2">
        <div class="div_dg">
            <div class="lewy">
                <a href="http://www.gddm.com.pl/programowanie.html" target="_blank">PROGRAMOWANIE</a>
                <p>JavaScript HTML CSS</p>
                <p>jQuery jQuery Mobile</p>
                <p>React Angular 2 ES6</p>
                <p>nodejs babel webpack</p>
            </div>
            <div class="prawy">
                <p><img src="images/DG-planet-creative-JavaScript.png" alt="poswojsku.info bezpłatne szkolenia i porady on-line"></p>
            </div>
        </div>
    </div>
    <div class="image" style="background-image: url(images/Single-Page-template-json-ajax.jpg)"></div>
    <div id="sliderPage3">
        <div class="div_dg">
            <div class="lewy">
                <a href="http://www.gddm.com.pl/multimedia.html" target="_blank">GRAFIKA ANIMACJA</a>
                <p>grafika na strony www</p>
                <p>grafika reklamowa</p>
                <p>animacja 2D i 3D</p>
                <p>grafika 2D i 3 D</p>
            </div>
            <div class="prawy">
                <p><img src="images/poswojsku-com-fun-crazy-arts.png" alt="poswojsku.info bezpłatne szkolenia i porady on-line"></p>
            </div>
        </div>
    </div>
    <div class="image" style="background-image: url(images/gddm-animacja.jpg)"></div>
    <div id="sliderPage4">
        <div class="div_dg">
            <div class="lewy">
                <a href="http://www.gddm.com.pl/szkolenia.html" target="_blank">SZKOLENIA</a>
                <p>technologie IT</p>
                <p>marketing</p>
                <p>zarządzanie</p>
                <p>projekty metodologia</p>
            </div>
            <div class="prawy">
                <p><img src="images/warsztaty-biznesplan.jpg" alt="poswojsku.info bezpłatne szkolenia i porady on-line"></p>
            </div>
        </div>
    </div>
    <div class="image" style="background-image: url(images/jQuery-animated-left-menu-biznes.jpg)"></div>
    <div id="sliderPage5">
        <div class="div_dg">
            <div class="lewy">
                <a href="http://www.gddm.com.pl/" target="_blank">DANE ADRESOWE</a>
                <p>w czym mogę pomóc?</p>
                <p>biuro(at)gddm.com.pl</p>
                <p>Zd Wola Paprocka 86</p>
                <p>znajdź mnie na Youtube</p>
            </div>
            <div class="prawy">
                <p>&nbsp;</p>
                <p><img src="images/szkolenie-tworzenie-stron-rabat50.png" alt="poswojsku.info bezpłatne szkolenia i porady on-line"></p>
            </div>
        </div>
    </div>
    <div class="image" style="background-image: url(images/landing-page.jpg)"></div>
    <div id="divFooter">
    </div>
</body>
</html>

 

Zobacz w menu podobne artykuły do: Responsywna strona z podmienianymi tłami przewijaniem tła HTML scroll

Budowa responsywnych i mobilnych stron internetowych

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć