Ich habe ein Balkendiagramm, das mit CSS3 animiert wird, und die Animation wird derzeit beim Laden der Seite aktiviert.

Das Problem, das ich habe, ist, dass das angegebene Balkendiagramm aufgrund von viel Inhalt vor dem Bildschirm platziert wird, sodass die Animation bereits beendet ist, wenn ein Benutzer einen Bildlauf nach unten durchführt.

Ich habe über CSS3 oder jQuery nach Möglichkeiten gesucht, die CSS3-Animation nur im Balkendiagramm zu aktivieren, wenn der Betrachter das Diagramm sieht.

<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>

Wenn Sie direkt nach dem Laden der Seite sehr schnell nach unten scrollen, sehen Sie, wie sie animiert wird.

Hier ist einjsfiddle von meinem Code. Ich weiß auch nicht, ob dies von Bedeutung ist, aber ich habe mehrere Instanzen dieses Balkendiagramms auf der Seite.

Ich bin auf ein jQuery-Plug-in namens waypoint gestoßen, hatte aber absolut kein Glück, es zum Laufen zu bringen.

Wenn mich jemand in die richtige Richtung weisen könnte, wäre das sehr hilfreich.

Vielen Dank!