Einblendeffekt: Anpassen des Observer-Verhaltens
Für Elemente mit Einblendeffekt verwenden wir standardmäßig einen Threshold von 0.1 . Dieser Wert gibt an, welcher Anteil eines Elements sichtbar sein muss, bevor der Observer reagiert.
Bei sehr großen (insbesondere hohen) Elementen kann ein ungeeigneter Threshold dazu führen, dass der Observer nicht ausgelöst wird. Der Grund: Der erforderliche sichtbare Anteil kann größer sein als der tatsächlich sichtbare Bereich (Viewport). In solchen Fällen sollte der Threshold angepasst werden, damit auch große Container zuverlässig erkannt werden.
Im aktuellen Standard ( ui.js ab Version 1.1.153) kann der Threshold dynamisch über die Funktion wSetObserverOptions(element) ermittelt werden. Diese Funktion lässt sich über die jeweilige Variante des Einblendeffekts aufrufen.
Beispiel Auszug elementSection.scss Variante elementSectionIfVisible_var20
/*@wCssFragment{class:elementSectionIfVisible;variant:20;caption:Einblenden mit Vergrößerungseffekt;caption-en:Fade in size}*/ .elementSectionIfVisible_var20 { -w-add-classes:wglAnimateIfVisible; -w-jquery:if(typeof wSetObserverOptions == 'function'){wSetObserverOptions(jQuery(this))}; .... }
Beispiel: Anpassen des Observers über ein Javascript-Quelltextelement
wObserverOptions = {
root: null, /*Schnittpunkt auf das sich der Observer bezieht, im Standard ist das der viewport*/
rootMargin: '0px', /*Offset der bei Berechnung des Schnittpunktes hinzugefügt wird.*/
threshold: 0.5 /* Schnittmengenverhältnis (intersectionRatio) des Elementes, ab dem der Observer die Callback-Funktion ausführt.
0.5 bedeudet zB., dass die Observerfunktion ausgeführt wird, sobald das Element zu 50%
in dessen Anzeigebereich ist.
*/
}