Хороший способ запустить анимацию ключевых кадров, когда элемент появляется в поле зрения?

Question

Каков хороший способ запуска анимации ключевых кадров, когда элемент появляется в поле зрения?

$(window).scroll(function () {
  if($(window).scrollTop() > 0) {
    element.addClass("animateMe");
  }
  else {
    element.removeClass("animateMe");
  }
});

Этот код работает, но ему нужен статический номер, что плохо для адаптивных макетов.

Answer 1

Console.log () будет запущен при просмотре окна на экране

        var pageTop  = $(window).scrollTop();
        var pageBottom =  pageTop + $(window).height()

        var eleTop = $(".box").offset().top;
        var eleBottom = eleTop +  $(".box").height();

        //only if ele is view on screen     
        if(pageBottom >= eleTop && eleBottom >= pageTop){
               console.log("viewed.....");
        }