Responsive page with swap background scrolling HTML scroll

flag language

Responsive page with swap background scrolling HTML scroll

Responsive page with swap background scrolling HTML scroll

 

Responsive page with swap background scrolling HTML scroll

 

Welcome to the next part of internet technology training. Today we're going to have fun making a page with changed backgrounds. See working pattern www.pol-fashion.eu . You move (scroll, scroll) the html text and the backgrounds change underneath. How to achieve this? A simple matter is enough HTML5 plus CSS3.

HTML declarations HTML5 HEAD

This is an html page, so you need to create the entire html structure. Start with HTML5 related declarations.

Doctype HTML tells us that this is a website made in HTML5 technology. We also have a language version, UTF-8 character encoding, and viewport, which I have already mentioned. Further description, keywords, page author, page title. Standard elements of the website, including linking css styles. If you do not know the principles of building a HEAD BODY website, take a look at my previous training, in which I showed in a descriptive way how the website was built. You can find videos on YouTube on my poswojsku channel and here on www.poswojsku.info (side menu).

Further in HTML is the body or code that causes us to display certain elements on our website. Here, there is not much of this code at all. This page is supported by jQuery, though to a small extent. jQuery causes that there is a mobile menu when the page is displayed on mobile devices.

HTML BODY HTML5

In the BODY section in the page code you will find: sliderPage1, sliderPage2, sliderPage3, etc. In these divs, i.e. with id sliderPage, we have the text html, which is what moves. However, between the sliders there is a special div, with the image class, which is the background. The background that appears behind the given text div. We get it through just such a code, i.e. by setting the background of the image. Class image, what exactly is a class image, look further in the next part of this guide you will find a description of the CSS code.

<! DOCTYPE html>
<! - Copyright 2016: poswojsku.pl sp. Z oo 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 = "Responsive page with scrolling picture background">
    <meta name = "keywords" content = "responsive , page, scrolling, background, picture ">
    <meta name =" author "content =" poswojsku Creative Agency Darek Gołębiowski ">
    <title> Responsive page with scrolling picture background </title>
    <link rel ="stylesheet" href="//www.poswojsku.info/appWebpageCssShadowMenu.css">
</head>
<body>
    <div id="nawigacja">
        <ul id="mainNav">
            <li class="doradztwo"><a href="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/biznesplan-lodz-zdwola-lask-sieradz-poddebice-ka...
            </li>
            <li class="programowanie"><a href="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/programowanie.html">https://www.gddm.com.pl/prog... target="_blank">JavaScript</a>
            </li>
            <li class="szkolenia"><a href="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/szkolenia.html">https://www.gddm.com.pl/szkoleni... target="_blank">Szkolenia</a>
            </li>
            <li class="grafikaanimacja"><a href="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/multimedia.html">https://www.gddm.com.pl/multime... target="_blank">Grafika</a>
            </li>
            <li class="grafikaanimacja"><a href="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/multimedia.html">https://www.gddm.com.pl/multime... target="_blank">Animacja</a>
            </li>
            <li class="portale"><a href="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/portale-wydawnictwo-reklama.html">https://www.gd... target="_blank">poswojsku</a>
            </li>
        </ul>
        <div class="menuResponsywne">
            <img src="//www.poswojsku.info/img/ikonka-menu-mobilne.png" alt="menu mobilne iko...>
        </div>
    </div>
    <div id="sliderPage1">
        <div class="div_dg">
            <div class="lewy">
                <a href="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/biznesplan-lodz-zdwola-lask-sieradz-poddebice-ka...
                <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="//ł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="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/programowanie.html">https://www.gddm.com.pl/prog... target="_blank">PROGRAMMING </a>                 <p> jQuery jQuery Mobile </p>
                <p> JavaScript HTML CSS </p>

                <p>React Angular 2 ES6</p>
                <p>nodejs babel webpack</p>
            </div>
            <div class="prawy">
                <p><img src="//www.poswojsku.info/images/DG-planet-creative-JavaScript.png" alt="poswo...ł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="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/multimedia.html">https://www.gddm.com.pl/multime... 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="//www.poswojsku.info/images/poswojsku-com-fun-crazy-arts.png" alt="poswoj...ł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="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/szkolenia.html">https://www.gddm.com.pl/szkoleni... 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="//www.poswojsku.info/images/warsztaty-biznesplan.jpg" alt="poswojsku.info...> </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="//www.poswojsku.info/%3Ca%20href%3D"https://www.gddm.com.pl/">https://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="//www.poswojsku.info/images/szkolenie-tworzenie-stron-rabat50.png" alt="p...ł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>

 

See in the menu similar articles to: Responsive page with swap backgrounds HTML scroll

 

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