Javascript erst laden wenn auf der Seite sichtbar

[hegi]

Hallo

ich habe ein Script welches Skillbars beim Starten der Seite "auflädt". Allerdings kommen die Bars ziemlich weit unten auf der Seite und wenn man runtergescrollt hat sind die Balken schon geladen. Wie kann ich Animation der Balken erst starten wenn sie eingeblendet werden ?

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="shortcut icon" href="images/ico/favicon.png">
		<link href="images/ico/favicon.ico" rel="shortcut icon" type="image/x-icon">
		<link href="images/ico/favicon.ico" rel="icon" type="image/x-icon">

		<title>Skill Bar</title>

		<!-- Custom styles for this template -->
		<link href="css/style.css" rel="stylesheet">
		
		<div class="wraper">
			<div class="skillst8">
				<div class="skillbar" data-percent="40%">
					<div class="count-bar">
						<div class="title">Planung</div>
						
					</div>
				</div>
				<div class="skillbar" data-percent="60%">
					<div class="count-bar">
						<div class="title">Training</div>
						<div class="count"></div>
					</div>
				</div>
				<div class="skillbar" data-percent="30%">
					<div class="count-bar">
						<div class="title">Ernaehrung</div>
						<div class="count"></div>
					</div>
				</div>
				<div class="skillbar" data-percent="40%">
					<div class="count-bar">
						<div class="title">Ruhephasen</div>
						<div class="count"></div>
					</div>
				</div>

			</div>
		</div>
		
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="lib/jquery.appear/jquery.appear.js" type="text/javascript"></script>
		<script src="js/custom.js" type="text/javascript"></script>

 

[mikdoe]

dann möchtest du vermutlich prüfen ob das element im viewport liegt.
dafür gibt es mit und ohne jQuery viele möglichkeiten.
z. b. Viewport Selectors for jQuery

und das würde ich an den eventhandler onscroll binden.

google suche mit "js element in viewport"

 

[hegi]

Danke für deine Infos
gibt es da auch irgendwas fertiges für Plug & Play ? ich habe nämlich keine Ahnung von Javascript :-/ und auch nicht wie ich die abfrage einbinden kann.

 

[TecEye]

ich hätte jetzt die position des elements im offset geholt und mit scroll.height + vh verglichen.
So regel ich das immer mit meinen animationen die erst erscheinen sollen wenn man sie sieht

 

[mikdoe]

ich hätte jetzt die position des elements im offset geholt und mit scroll.height + vh verglichen.

ja, genau das ist der viewport.

 

[kkapsner]

Plug & Play

Warscheinlich nicht, da niemand exakt das gleiche Setting hat wie du.

Wer hat denn die custom.js geschrieben? Derjenige könnte das ev. auch. Ist ja jetzt keine Hexerei.