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

szkolenia bezpłatne kursy
lekcje, porady, artykuły znajdziesz w bocznym menu
 
 

Budowa responsywnych i mobilnych stron internetowych

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

<
  • DANE ADRESOWE

     

    w czym mogę pomóc?

    biuro(at)gddm.com.pl

    Zd Wola Paprocka 86

    znajdź mnie na Youtube

  • PROGRAMOWANIE

     

    JavaScript HTML CSS

    jQuery jQuery Mobile

    node.js React Angular

    ES6 babel rollup karma

  • GRAFIKA ANIMACJA

     

    grafika na strony www

    grafika reklamowa

    animacja 2D i 3D

    grafika 2D i 3 D

  • DORADZTWO

     

    doradztwo IT

    doradztwo biznesowe

    usługi IT

    analizy biznesowe i IT

  • SZKOLENIA

     

    technologie IT

    marketing

    zarządzanie

    projekty metodologia

>