Depot43-Unterlagen - Scrollbereich

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;
	    text-align: center;
	    width: 100%;
	    background-color: rgba(0,0,0,0.5);
	    color: #fff;
	    padding: 10px 0;
	    z-index: 999;
	}
	#progressBar {
	    background-color: #f00;
	    height: 10px;
	    width: 10px;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 2000;
	}

	body {
		background:url("http://depot43.ch/unterlagen/assets/skrollr/wolken.jpg") repeat fixed;
	}
	  .container{
	  	max-width:500px;
		font-size:3em;
	  }
  </style>
  </head>

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

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

	<div class="container">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo dolores nobis voluptas, ullam quos debitis nostrum ex obcaecati magnam quasi eos repellat facilis minima eum deserunt sed eaque nulla autem, aperiam. Voluptatum quos, reiciendis quaerat necessitatibus ratione inventore optio similique. Provident a esse vel cupiditate, adipisci ipsum ab repellendus numquam.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptates nulla veritatis tenetur nemo ad, aut perspiciatis, ipsum dicta consequuntur! Beatae modi explicabo ad iste voluptatem ut numquam quo veniam.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus omnis recusandae, non praesentium fugit. Alias quam rem quis! Porro fugit, in maxime repudiandae rem obcaecati sunt neque ducimus odit autem voluptate hic, harum odio officiis sapiente eaque. Modi corporis quisquam veniam fugit repellat soluta eos eligendi ratione, tempora aut mollitia impedit. Magnam reiciendis, architecto quam impedit eligendi consequatur rerum dolores deserunt incidunt aliquid. Ipsa dolor ut tempore repellendus labore temporibus quaerat beatae quas voluptas soluta consequatur dicta, doloribus quod sunt adipisci dignissimos pariatur eligendi cum non. Nisi rerum dicta numquam non sed suscipit nesciunt asperiores, itaque aliquid id? Veritatis, fugiat.</p>
	</div>


  <!-- 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>




            

Hinweis

Um den Scrollbalken als "Animations-Frames" überhaupt nutzen zu können, muss der Seiteninhalt länger sein als die Höhe des Browserfensters. Diese Höhe kann erzeugt werden durch:

entsprechend langen Inhalt, Text oder Bild > lorem ipsum
eine Höhenangabe mit CSS > .container{min-width:300px;}
eine Wertübergabe an das "data-object" > data-4000=" ... "

Diese Wertübergabe kann je nach Projekt hinderlich oder gewünscht sein. Sie lässt sich ein- und ausschalten mit:

forceHeight: false

oder

forceHeight:true

Die Debugging-Anzeige lässt und erkennen, dass mit "forceHeight: true" die Länge mit "4000 Pixel", mit "forceHeight: false" aber auf "3476 Pixel" geht. Es wird also der an skrollr.js übergebene Wert benutzt " data-4000="background-position:0px -1000px;"" oder die eigentliche Höhe des Inhalts. Daraus lassen sich folgende Schlüsse ziehen:

die Animation wird mit festgelegten Werten ausgeführt
ist der übergebene Wert kürzer als der Inhalt, endet die Animation frühzeitig
ist der übergebene Wert länger als der Inhalt, läuft die Animation weiter bis dieser Wert erreicht ist ...
oder der übergebene Wert wird mit "forceHeight: false" überschrieben - jetzt ist die Länge des Inhalts entscheidend

Mit Hilfe dieses "Tricks", kann der an "skrollr.js" übergebene (Pixel)-Wert beliebig länger sein als der eigentliche Inhalt. Das ist beim Aufbau einer Animation mit noch unbestimmter Länge eine grosse Hilfe.