Блог

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

Если я добавлю класс, когда документ будет готов, тогда анимация в верхней части страницы запустится сразу, но анимация также выполняется на полпути вниз по странице (поэтому мы не видим, произойдет ли это).

Если я добавлю класс при прокрутке, то вам нужно немного прокрутить, чтобы анимация в верхней части страницы запустилась.

Итак, у меня есть следующий код, который работает так, как я хотел бы. Мой вопрос в том, есть ли способ объединить это? Это кажется очень повторяющимся.

 $(document).ready(function() {
  $('.animateText').each(function(){
  var imagePos = $(this).offset().top;
  var topOfWindow = $(window).scrollTop();
  if (imagePos < topOfWindow 400) {
    $(this).addClass("slide-text");
  }
});  
});
  
$(window).scroll(function() {
  $('.animateText').each(function(){
   var imagePos = $(this).offset().top;
   var topOfWindow = $(window).scrollTop();
   if (imagePos < topOfWindow 400) {
      $(this).addClass("slide-text");
   }
  });
});
  

Я пытался использовать это, но это то же самое, как если бы я просто использовал прокрутку окна.

 $(document).ready(function() {  
   $(window).scroll(function() {
      $('.animateText').each(function(){
         var imagePos = $(this).offset().top;
         var topOfWindow = $(window).scrollTop();
         if (imagePos < topOfWindow 400) {
            $(this).addClass("slide-text");
         }
      });
   });
 });