Javascript welche Elemente sind im Blickfeld?

06.08.2016 20:21 Uhr

Hallo Comunity.

Ich bin beim erstellen meiner Website auf ein Problem gestoßen.

Ich schreibe eine One-Page seite, mit Einblendeanimationen der verschiedenen Elemente. Nun habe ich mich noch nicht so viel mit JS auseinandergesetzt.

Ich möchte die Elemente, die nicht direkt zu sehen sind erst dann per Animation einblenden, wenn sie im Blickfeld liegen. Für die Animationen verwende ich die Animate.css. Ich müsste also einem Objekt einmalig, wenn es das erste Mal im Sichtfeld ist zwei Klassen geben, damit es animiert wird.

Ich habe eine Variante mit der Inview Erweiterung gefunden, die aber bei mir nicht funktioniert. Kann mir jemand sagen, wie ich also herausfinde, wann sich ein html-Element im Blickfeld befindet.

 

Hier der Code der Lösung mit der Inview Datei, falls ich einen Fehler drinnen habe:

$(document).ready(function() {
	$('.bd_slidePara').bind('inview', function(e, isInView, visiblePartX, visiblePartY) {
			if (isInView) {
				if (visiblePartY == 'both' || visiblePartY == 'bottom') {
					$('.bd_slidePara').css('visibility', 'visible');
					$('.bd_slidePara').addClass('animated zoomIn');
					$('.bd_slidePara').unbind('inview');
				}
		}
	});
});
Ich habe die Animate.css, die Inview Datei und jQuerry richtig eingebunden, da gibt es keine Fehler.
 
Danke für Lösungsvorschläge

Ähnliche Fragen



Datenschutzerklärung · Impressum