Depot43-Unterlagen - Parallax-Scrolling

HTML Elemente
            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Parallax-Scrolling</title>
	<style>
        body,
        html {
            height: 100%;
            margin: 0;
            font: 400 15px/1.8 "Lato", sans-serif;
            color: #777;
            background-color: #7362ca;
        }
        h3 {
            letter-spacing: 5px;
            text-transform: uppercase;
            font: 20px "Lato", sans-serif;
            color: #111;
            text-align: center;
        }

        div.img {
            position: relative;
            opacity: 0.5;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

        }

        .img-1 {
            background-image: url("http://depot43.ch/unterlagen/assets/microcss/badeplaetzli.jpg");
            min-height: 100%;
        }

        .img-2 {
            background-image: url("http://depot43.ch/unterlagen/assets/microcss/bootsteg.jpg");
            min-height: 60%;
        }

        .img-3 {
            background-image: url("http://depot43.ch/unterlagen/assets/microcss/brunnen.jpg");
            min-height: 400px;
        }

        .img-4 {
            background-image: url("http://depot43.ch/unterlagen/assets/microcss/urnersee_schiff.jpg");
            min-height: 250px;
        }

        .img-5 {
            background-image: url("http://depot43.ch/unterlagen/assets/microcss/wegderschweiz.jpg");
            min-height: 100%;
        }

        section {
            position: relative;
            color: #777;
            background-color: white;
            text-align: center;
            padding: 50px 80px;
            text-align: justify;
            box-shadow: 3px 3px 8px rgba(0,0,0,0.8);
        }

        .caption {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            text-align: center;
            color: #000;
        }

        .caption span.button-dark {
            background-color: #111;
            color: #fff;
            padding: 16px 24px;
            font-size: 25px;
            height: 60px;
            letter-spacing: 10px;
            border-radius: 30px;
            text-transform:uppercase;
        }

        .button-clear {
            background-color: transparent;
            font-size: 25px;
            color: #f7f7f7;
        }
        code, pre {
            color:#222;
            padding:6px;
            border: 1px solid #ccc;
        }

        @media only screen and (max-device-width: 768px) {
            .img {
                background-attachment: scroll;
                width:100%;
                height:auto;
            }
        }
	</style>
</head>
<body>
    <div class="img img-1">
        <div class="caption">
            <span class="button-dark">SCROLL RUNTER!</span>
        </div>
    </div>

    <section class="text1"><h3>Parallax Effekt - was ist das?</h3>
        <p>Parallax-Scrolling ist ein Trend im Web. Als Parallaxe (von altgriechisch παράλλαξις parállaxis „Veränderung, Hin- und Herbewegen“) bezeichnet man die scheinbare Änderung der Position eines Objektes, wenn der Beobachter seine eigene Position verschiebt.</p>
        <p>Beim "Parallax-Scrolling" einer Website verschieben wir nicht unsere Position, aber wir verschieben die Hintergrundbilder in anderer Relation als die Textflächen im Vordergrund. Dadurch entsteht der Eindruck, als würden wir unsere Position verschieben, während wir auf einen 2-Dimensionalen Bildschirm schauen. Wir können also von einem "Web-Trompe l'oeil" sprechen.</p>
    </section><div class="img img-2">
        <div class="caption">
            <span class="button-clear">JEDER BILDBEREICH KANN MIT VERSCHIEDENE HÖHENANGABEN AUSGESTATTET WERDEN.</span>
        </div>
    </div>


    <section class="text2"><h3>Die Technik</h3>
        <p>Es gibt verschiedene Techniken, das zu erreichen. Die naheliegendste scheint mir, dies mit CSS zu bauen. Dazu benutzen wir abwechselnd: div-Elemnte für Bild und Textbereiche die im HTML-Code untereinander angeordnet werden.</p>
        <h3>HTML</h3>
	    <p>Im diesem Beispiel: <code>class="img"</code> für die Bilder und <code>class="text</code> für die Texbereiche.<br>
        Im Seitenquelltext ist es leicht ersichtlich, dass sich Bild- und Textbereiche abwechseln. Ohne Eingriffe mit CSS, werden beim scrollen die einzelnen Elemente (ganz unspektakulär) von oben nach unten in ihrere Reihenfolge angezeigt.</p>
        <h3>CSS</h3>
        <p>Die im HTML leeren Bildbereiche werden jeweils mit einem Hintergrundbild und einer Angabe der gewünschte Höhe versehen</p>
        <pre>background-image: url("images/meinbild.jpg");
min-height: 100%;</pre>
        <p>Der Trick bei der Sache ist, dass die Hintergrundbilder mit "fixed" positioniert sind. Dadurch befinden sie sich immer an der oberen Kante des Browserfensters, währen die Textbereiche wie gewohnt scrollbar sind. Optional wird die Parallax-Site noch etwas verschönert, indem die Bilder mit "cover" über die ganze Breite des Fensters in Szene gesetzt, eingemittet und nicht wiederholt werden.</p><code>c
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;</code>
    </section><div class="img img-3">
        <div class="caption">
            <span class="button-dark">SCROLL HOCH ODER RUNTER!</span>
        </div>
    </div>


    <section class="text3"><h3>Die Bilder und Responsiv-Design</h3>
        <p>Du kannst hoch- und runterscrollen um das Feeling von Parallax Scrolling zu erleben.</p>
    </section><div class="img img-4">
        <div class="caption">
            <span class="button-dark">Alles nur halb so wild!</span>
        </div>
    </div>


    <section class="text4"><h3>Einheitliches Erscheinungsbild</h3>
        <p>Aus gestalterischer Sicht, lohnt es sich bei Parallax-Design auf ein einheitliches Erscheinungsbild zu achten. Durch die Scrollbewegungen ensteht ein eher unruhiger, wilder Eindruck.  In diesem Beispiel habe ich in die CSS-Trickkiste gegriffen: Die Bilder sind ,it "opacity" auf 50% Transparenz gesetzt. Der Blau-Violette Hintergrund deas "body"-Elements färbt alle Bilder, so dass ein zwar falschfarbiges, aber gestalterisch einheitliches Erscheinungsbild entsteht.</p>
    </section>
	
	<div class="img img-5">
		<div class="caption">
		    <span class="button-dark">Alles mit CSS!</span>
		</div>
	</div>
</body>
</html>


 

            