Javascript function abfeuern wenn element komplett im vieport

[SmokeTM]

Hallo Leute,

ich bins wieder einmal ich bin fleissig am javascript schreiben herumprobieren usw bin gerade dabei meine seite fertigzustellen. Jetzt hab ich nur ein Problem bei meiner Seite die Circle die animiert sind sollen erst dann laden wenn die komplett im viewport sind ihr könnt euch das unter:

www.raphaelschrempf.at anschauen das soll keine werbung oder sowas für mich sein falls es ein Problem ist lösch ich den link und post den code hier.

Also die function soll erst dann abfeuern mein ich^^

lg

 

[kkapsner]

Eine quick'n'dirty Lösung wäre, dass du unter dem Element, das ganz in Sicht sein soll, eine weiteres Element platzierst, da dann das inview-"Event" feuert.

Sauber wäre es natürlich, wenn das inview-Skript auf die untere kante des Elements prüfen würde... ev. kann es das auch schon - einfach mal in die Dokumentation schauen.

 

[SmokeTM]

Danke für deine Antwort ja das ist schon richtig das problem bei der quick and dirty variante ist bei responsive design verschiebt sich das ganze dann nach unten und da bild würde erst viel zu spät angezeigt werden.

Und ja das Inview-skript prüft das aber irgendwie löst das bei mir nichts aus relevanter Code:

$('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // element is now visible in the viewport
    if (visiblePartY == 'top') {
      // top part of element is visible
    } else if (visiblePartY == 'bottom') {
      // bottom part of element is visible
    } else {
      // whole part of element is visible
    }
  } else {
    // element has gone out of viewport
  }
});

lg

 

[kkapsner]

Kannst du mal einen Testlink machen, wo wir uns ansehen können, dass es nicht "auslöst".

PS: Ich verstehe nicht, was das Problem mit dem Verschieben beim responsive Design ist. Die Elemente sollten sich ja zusammen verschieben.