CSS animation/drawing and slide based navigation fix (IE8 compatible)

Hey. I have been working on a prototype of a slide based presentation in CSS+JS. For slide navigation I am using the FullpageJS library. The other feature is that text and graphics are "drawn" as the user scrolls down. See the demo at the following link using username "Freelancer" and password "volcano". [login to view URL] I need this fixed so that: - The two background images (#green-line-image, #purple-line-image) are drawn individually as the user scrolls down - The text and graphics need to remain lined up when resizing the window - I need it so that the text shows up only when the line reaches that point on the page. Right now the timing is off and the text fades in as the line is going down - I need a simple way to add new text and graphics "triggers" depending on where the line is on the page. Basically, at a certain height I want to be able to trigger new text or graphics. - Any changes must work in IE8 I can explain what I have further if you are interested. I don't need to use the existing prototype code - whatever gets it working is fine. So that I know you read this, please start your proposal with "Hello Bryan!". The timeline for this is within the next 8 hours. Thanks!