Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Prinzip</title>
	<style>
		body,
		html {
		    height: 100%;
		    margin: 0;
		    color: #777;
		    background-color: #7362ca;
		}
		div.img {
		    position: relative;
		    opacity: 0.6;
		    background-attachment: fixed;
		    background-position: center top;
		    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%;
		}
		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 h3 {
			margin:0;
			text-align:center;
		}
	</style>
</head>
<body>
	<div class="img img-1">
		<div class="caption">
			<h3>SCROLL RUNTER!</h3>
		</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>
	</section>
	
	<div class="img img-2"></div>

	<section class="text2"><h3>Das Prinzip</h3>
		<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>
</body>
</html>


 

            

Hinweis

Die HTML-Elemente werden abwechselnd untereinander angeordnet (bspw.):

Bild (div.img)
Text (section.text)
Bild (div.img)
Text (section.text)

Entscheidend ist es, dass die Bilder als Hintergrundbilder in die div-Elemente platziert werden. Mit CSS werden die Hintergrundbilder positioniert:

background-attachment: fixed;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;

Jedes div-Element mit Hintergrundbild bekommt eine festegelegte Höhe:

background-image: url("http://....jpg");
min-height: 100%; oder min-height: 200px;

Dadurch werden die Bilder am oberen Rand des Browserfensters angezeigt. Die Textbereiche hingegen werde ganz normal gescrollt.