0

I need the simplest and most practical way to start css3 animation on certain points of (scroll). Using jquery would be nice, because I already have it declared in my header.

I am using animate.css provided by http://daneden.github.io/animate.css/ and I have few images that I am animating, one is in the top of page which should animate after page is loaded, second is in the middle of vertical scroll, and the last one is in my footer section.

The problem is - right now they all are animating on start (on page load), so no one will notice their animations. How I can start these class on xxx page height ?

I am novice at this so please try to describe it with details. Ah, and I almost forget... Please keep in mind, that this website can have more text in it, so top-height of this images might change, so any solutions with rigidly defined height won't work as needed.

Sorry for my English

Thank You.

none20
  • 71
  • 9
  • Seems like you just want to use [media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)? This will possibly help: http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript – charles Oct 29 '14 at 12:21
  • Hi. Thanks for the answer. But that's not exactly the best solution. This is depending on speciefic height. But what if I will put more text before animated images? they will be more down. – none20 Oct 29 '14 at 12:25
  • The solution should have I dont know, maybe an anchors, where they are on the screen they jquery plays the css rule? – none20 Oct 29 '14 at 12:26

1 Answers1

0

You could use this inview plugin: https://remysharp.com/2009/01/26/element-in-view-event-plugin Then you could start the animation as soon as the section where the animation is supposed to appear, is visible.

user2622348
  • 145
  • 3
  • 7
  • Thank You, Your solutions seems the best for me. But please, how can I use it with my div and css with the effect.css apiled? – none20 Oct 29 '14 at 12:32