Scrollbereich
Code Sources Icon Code Sources Icon Code Sources Icon


Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
Code Elemente - HTML - CSS - JS

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.