Adding css animation when it is scrolled to the CLASS ELEMENT

Asked Jun 09 '16 at 13:46

Active Jun 09 '16 at 14:07

Viewed 66 times

It's surely simple question but i didn't find what i want. I need css animation (which is class) to add to class element when user scroll to it's Y position (be able to see it).

For example i have one class called AnimationClass

Here is my css animation:

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

So when user scroll to element Y position add this class to element class. I don't want to use if (scroll <= 500) .

Update: U wrote down that there is a lot of similar question. But i need CLASS element to animate, not ID. I don't know how to write it in javascript.

edited Jun 09 '16 at 14:07

asked Jun 09 '16 at 13:46

pHenomen

1

You could have a look at http://imakewebthings.com/waypoints/ – Nick R Jun 09 '16 at 13:47
I'm not good with javascript, that's why i asked this. – pHenomen Jun 09 '16 at 13:48
1

Also here more answers http://stackoverflow.com/q/21561480/2887133 – DaniP Jun 09 '16 at 13:52
This elemnts is id not class. – pHenomen Jun 09 '16 at 14:00
@pHenomen You can select on a class and not an ID. Your question has been asked before. [This answer](http://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery) uses an ID but could easily be switched out for a class. – hungerstar Jun 09 '16 at 16:41

Adding css animation when it is scrolled to the CLASS ELEMENT

0 Answers0