Depot43-Unterlagen - Ein Bild von Rom

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: #efefef;
	}
	main {
		background:#ccc ;
		position:relative;
		background-repeat: no-repeat;
		width:960px;
		height:1600px;
		overflow: hidden;
		margin: 0 auto;
		border-left: 1px solid #333;
		border-right: 1px solid #333;
	}
	h1 { 
		position:absolute;
		color: white;
		font-size: 3.3em;
		text-align:center;
		width:100%;
		top:40px;
		z-index:999;
	}
	  img.ohne {
	  	
		height:auto;
        width:960px;
	  }
	 img.mit {
	  	position:fixed;
		width:960px;
		height:auto;
	  }
	  div.maske {
        height: 1px;
        overflow: hidden;
        width: 960px;
        z-index: 998;
        position: fixed;
	  }
      div.text {
          position:fixed;
          width: 960px;
          top: 560px;
          font-size: 2em;
          text-align:center;
          padding: 20px 60px;
          background-color: rgba(255,255,255,0.6);
          z-index:1000;
      }
  </style>
  </head>

<!-- HTML *************************** -->
<body>

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

	<main> 
		<h1>Ein Foto aus Rom<br><span class="glyphicon glyphicon-arrow-down"></span></h1>

		<img class="mit" src="http://depot43.ch/unterlagen/assets/skrollr/rom/rom-mit.jpg" alt="Spanische Treppe Rom">
		<div class="maske" data-anchor-target="main" data-start="height:1px;" data--480-top="height:600px;">
				<img class="ohne" src="http://depot43.ch/unterlagen/assets/skrollr/rom/rom-ohne.jpg" alt="Spanische Treppe Rom">
		</div>
		<div class="text" data-anchor-target="main" data--500-top="top:560px;" data--900-top="top:0px;">
			<p>Das kleine Mädchen im Vordergrund wollte ein Bild ohne alle diese Touristen.</p>
			<p>Affinity-Photo kennt ein Werkzeug "restaurieren". Damit kann ein Bereich markiert werden, dessen Aussenkanten in den Innenbereich der Markierung kopiert werden. Das entfernen der Touristen wird damit zum vergnüglichen Spiel.</p>
			<div>Informationen und Links:
				<ul>
					<li>Wie das geschah: <a href="http://depot43.ch/affinity/rom/" target="_blank">Informationen auf http://depot43.ch/affinity/rom/</a></li>
					<li>Affinity Photo: <a href="https://affinity.serif.com/de/photo/" target="_blank">https://affinity.serif.com/de/photo/</a></li>
				</ul>
			</div>
		</div>
	</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>




            