Über scrollObserver
scrollObserver ist eine Library für Javascript, mit der du deine DOMElemente beim scrollen überwachen kannst. Es liefert dir Informationen darüber, wo du dich im Element gerade befindest. Gut geeignet für Animationen / Parallax scrolling / infinite-scroll / sticky Navigation
Inspiriert von scrollMagic & waypoints
scrollObserver zeigt dir
- scroll Richtung ( up / down )
- Position im Viewport
- Position im Dokument ( in Pixel / Prozent )
- vier verschiedene States: arrivedTop, pastTop, pastBottom, arrivedTop
weitere features
- Controller
- Sub-Controller mit eigenem Viewport
- funktioniert auch bei Smartphones | Touch-Geräten
Dokumentation
Ein Dom Element auswählen mit data-scene. Ein Controller hinzufügen mit data-controller="deinController"
<!--
HTML Element auswählen. mit data-scene. Ein Controller hinzufügen mit data-controller.
-->
<div data-scene data-controller="ctl">Hier steht mein Content</div>
<script>
/**
* scrollObserver aufrufen
*/
scrollObserver({
controllers: {
/**
* Hier werden die controller Funtionen definiert.
*/
ctl: function(obj, state){
// obj liefert
// obj.yPx = PosY. in Px.
// obj.yPt = PosY in Prozent
// obj.direction = scroll Richtung
// obj.yGlobPx = Global yPos im Viewport
//State liefert
//pastTop, arrivedTop, animate, arrivedBottom, pastBottom
}
}
});
</script>
Optionen
triggerOffset ( :number )
Standart: 0 Damit kannst du den scrollbalken versetzen.
fps ( :number )
Standart: 30 Damit lässt sich die Bildwechselfrequenz( frames per second ) einstellen.
scrollObserver({
triggerOffset: 50,
fps: 60,
controllers: {
scene: function(obj, state){}
}
});
Komplexes Beispiel
Wir können mit "data-sub-scene" und "data-sub-controller" untergeordnete Scenes erstellen ( Verschachtelung ). Mit "data-scene-begin" und "data-scene-end" können wir den Start und End Punkt definieren. Das Elternelement ist 100% die Kinderelemente ( sub-scenes ) können die 100% unter sich aufteilen. z.B Es gibt 3 sub-scenes. 1. scene fängt bei 0 an und endet bei 33%. Die 2. scene fängt bei 33% an und endet bei 60%. Die 3. fängt bei 66% an und endet bei 99%
<div data-scene data-controller="parentCTL">
<!--
Child Elements
-->
<div data-sub-scene data-sub-controller="childCTL1" data-scene-begin="0" data-scene-end="33">dein content</div>
<div data-sub-scene data-sub-controller="childCTL2" data-scene-begin="33" data-scene-end="66">dein content</div>
<div data-sub-scene data-sub-controller="childCTL3" data-scene-begin="66" data-scene-end="99">dein content</div>
</div>
<script>
scrollObserver({
controllers: {
parentCTL: function(obj, state){
},
childCTL1: function(obj, state){
},
childCTL2: function(obj, state){
},
childCTL3: function(obj, state){
}
}
});
</script>