Skrollr-JS - ParallaxScrolling

Die Bibliothek "Prinzhorn/skrollr" benutzt den Scrollbalken als Basis für Rückgabewerte. Damit lassen sich Positionen beim scrollen berechnen und durch entsprechende Events werden Animationen ausgelöst. Oft wird für solches Verhalten die Bezeichnung "ParallaxScrolling" verwendet und wurde als "OnePageDesign" bekannt. Prinzhorn/scrollr kann bedeutend mehr, es kann damit abhängig vom Scrollbalken animiert werden.

HomeBase auf GitHub: https://github.com/Prinzhorn/skrollr

Die folgenden Beispiele sind mit Prinzhorn/scrollr gebaut. Zudem braucht es einen stabilen Workaround mit:

HTML5, CSS3 und Javascript
jQuery ist der Motor, der durch "skrollr" erweitert wird
Als Layoutbasis habe ich zusätzlich Bootstrap verwendet, das vereinfacht mir die Darstellung, hat aber sonst mit "Printhorn/scrollr" nichts zu tun.

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

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;
	}

	/*  Layout */
	header {
	    background-color: #ccc;
	    min-height: 140px;
	}
	main {
	    background-color: #fff;
	    min-height: 640px;
	}

	footer {
	    background-color: #ccc;
	    min-height: 240px;
	}
  </style>
  </head>

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

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

	<header>
	header
	</header>

	<main>
	Inhalt
	</main>

	<footer>
	footer
	</footer>


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

                //console.log(data.curTop);
                jQuery('#offset').text(Math.round(data.curTop));
            }
        });
  
  </script>
</body>
</html>




            

Das Basis-Dokument

Verwendet wird HTML, CSS und Javascript. Um zu testen und zu kopieren ist es am einfachsten wenn alles in einer Datei angelegt wird. Zur Übericht sind die Codesprachen durch kommentare getrennt.

Zeile 7 > Viewport für Responsiv-Design
Zeile 8 > Bootstrap-CSS wird nur für das Design verwendet. "skrollr-JS ist nicht auf Bootstrap angewiesen.
Ab Zeile 10 > CSS-Stile

Debugging

Der Wert der durch die Position des Scrollbalkens errechnet wird, verändert die in die Bibliothek eingegebenen Werte, animiert sie. Dieser Scrollbalken-Positionswert wird ersichtlich, wenn er als Zahl angezeigt wird oder als Anzeigebalken der den jeweiligen, prozentualen Wert auf die Breite des Browserfensters verteilt anzeigt. Die gezeigte Zahl, entspricht dem Pixelwert, den der Scrollbalken nach unten geschoben wurde.

<script type="text/javascript">
     var s = skrollr.init({
          render: function(data) {
          jQuery('#offset').text(data.curTop);
          }
     });
 </script>

Balken mit prozentualer Anzeige: Der Balken wird bei Startposition des Scrollbalkens auf 0% Breite gesetzt, auf der End-Position auf 100%:

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

Der Zahlenwert wird mit jQuery im durch "data.curTop" an das Div-Element übergeben:

<div id="offset">10</div>