Depot43-Unterlagen - Die kurze Geschichte eines Steins

Code Elemente - HTML - CSS - JS
            
            

<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 CSS3 JS</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- CSS *************************** -->
  <style>
		 /* Debugging Anzeige Balken */
	#offset {
	    position: fixed;
	    top: 0;
	    width: 100%;
	    color: #666;
	    padding: 10px;
	    z-index: 999;
	}
	#progressBar {
	    background-color: #f00;
	    height: 2px;
	    width: 10px;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 2000;
	}

	body {
		background: black;
	}
	main {
        background:url("http://depot43.ch/unterlagen/assets/skrollr/stein/pano-web.jpg") ;
        position:relative;
        background-repeat: no-repeat;
        width:800px;
        height:12000px;
        overflow: hidden;
        margin: 0 auto;
        border-left: 1px solid #333;
        border-right: 1px solid #333;
	}
	h1 { 
        position:fixed;
        color: white;
        font-size: 3.3em;
        text-align:center;
        margin-left: 20px;
	}
	p {
        position:fixed;
        font-size:2em;
        line-height:1.2em;
        color: #ccc;
        border-bottom: 2px solid #ccc;
        width: 600px;
        top: 160px;
        text-shadow: 1px 1px 5px black;
	}
      p.text5 {
          color:black;
          font-weight: bold;
          text-shadow: 2px 2px 5px white;
      }
      p.footer {
          position:fixed;
          background-color:rgba( 255, 255, 255, 0.4 );
          width: 800px;
          padding:24px;
          height:120px;
          top:auto;
          bottom:0px;
      }
  </style>
  </head>

<!-- HTML *************************** -->
<body data-start="background-position:0px 0px;"  data-end="background-position:0px -1000px;">

<div id="progressBar" data-0="width:0%;" data-end="width:100%;"></div> 
<div id="offset">10</div>

	<main> 
       
       <h1 data--600-top="opacity:1;" data--1200-top="opacity:0;">Die kurze Geschichte eines Steins</h1>

        <p class="text1" data-anchor-target="main" data--600-top="opacity:0; transform:translateX(-600px)" data--1200-top="opacity:1; transform[bounce]:translateX(20px)" data--1500-top="opacity:1; transform:translateX(20px)" data--2100-top="opacity:0; transform:translateX(-600px)">Als sich der Wasserstoff immer weiter verdichtete, entstanden die Sonnen. </p>
		
		<p class="text2" data-anchor-target="main" data--2000-top="opacity:0; transform:translateX(-600px)" data--2600-top="opacity:1; transform[bounce]:translateX(20px)" data--3300-top="opacity:1; transform:translateX(20px)" data--3600-top="opacity:0; transform:translateX(-600px)">Gravitation und Fliehkraft liessen Teile der Sonnen auf eigenen Bahnen kreisen und bildeten Planeten.</p>
		
		<p class="text3" data-anchor-target="main" data--3500-top="opacity:0; transform:translateX(-600px)" data--4000-top="opacity:1; transform[bounce]:translateX(20px)" data--4500-top="opacity:1; transform:translateX(20px)" data--5000-top="opacity:0; transform:translateX(-600px)">Die abkühlende Oberfläche der Planeten bildete die Steine. Auf unserem Rücken enstand das Leben.</p>
		
		<p class="text4" data-anchor-target="main" data--4500-top="opacity:0; transform:translateX(-600px)" data--5000-top="opacity:1; transform[bounce]:translateX(20px)" data--5500-top="opacity:1; transform:translateX(20px)" data--6000-top="opacity:0; transform:translateX(-600px)">Erosion erzeugte Sand, der zusammen mit  biologischen Resten den Humus bildete.</p>
		
		<p class="text5" data-anchor-target="main" data--5500-top="opacity:0; transform:translateX(-600px)" data--5900-top="opacity:1; transform[bounce]:translateX(20px)" data--6400-top="opacity:1; transform:translateX(20px)" data--6800-top="opacity:0; transform:translateX(-600px)">Die Verschiebung der Kontinente bildeten Berge und Täler, Wasser, Feuer und Eis formten sie .</p>
		
		<p class="text6" data-anchor-target="main" data--6800-top="opacity:0; transform:translateX(-600px)" data--7300-top="opacity:1; transform[bounce]:translateX(20px)" data--7800-top="opacity:1; transform:translateX(20px)" data--8100-top="opacity:0; transform:translateX(-600px)">Die Menschen schlugen Löcher in den Fels, sie begannen den Planeten nach ihrem Gutdünken umzuformen.</p>
		
		<p class="text7" data-anchor-target="main" data--7900-top="opacity:0; transform:translateX(1600px)" data--8100-top="opacity:1; transform[bounce]:translateX(20px)">Nun liege ich hier und warte darauf, was passieren wird.</p>
		
		<p class="footer" data-anchor-target="main" data--8500-top="opacity:0;" data-end="opacity:1;">Steine können recht pragmatisch sein. Es ist im auch egal, ob seiner Geschichte geglaubt wird.</p>
		
	</main>


  <!-- Javascript ************************ -->
  <script type="text/javascript" src="https://depot43.ch/unterlagen/themes/bootstrap/js/skrollr.min.js"></script>
  <!-- jQuery optional -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
  <script type="text/javascript">
  
  	var s = skrollr.init({
		forceHeight: false,
		render: function(data) {
			jQuery('#offset').text(data.curTop);
		}
	});
  
  </script>
</body>
</html>




            